I wanted to have a 100% wide header with logo on very left and a couple of elements lined up on very right.
I decided i would try to use the top-bar to create this effect (Not sure if this is the best way to do this considering the nav will be below this?)
It seems to work though but now I am trying to create a link with and icon and beside that a select form box with an icon in front of it. Not sure the best way to do this? If i use a row with columns it creates too much space between the globe icon and the select input...if i make the column with globe icon smaller it makes the icon smaller too. The globe icon doesn't seem to want to vertical align to middle to match the portal one beside it as well. Any suggestions?
Here is my code...
<header> <!-- Start Top Bar --> <div class="top-bar"> <div class="top-bar-left"> <ul class="menu"> <li class="menu-text"><img src="content/images/logo.png" /></li> </ul> </div> <div class="top-bar-right"> <ul class="menu"> <li><span><img src="content/images/spool-icon.png" alt="Supplier Portal"> Supplier Portal </span></li> <li class="language"> <form> <div class="row"> <div class="medium-4 columns"> <label for="supplier" class="text-right middle"><img src="content/images/globe-icon.png" alt="Languages"></label> </div> <div class="columns"> <select id="supplier" class="text-left middle"> <option value="english">English</option> <option value="francais">Francais</option> <option value="Espanol">Espanol</option> </select> </div> </div> </form> </li> </ul> </div> </div> <!-- End Top Bar --> </header>