[Resolved] Centre Icons in Header Area

[philippagreen]

How can I centre the Login/register, £GBP, Shopping Basket Icon and the Search Bar so that it appears centrally in this area.  I am using the Foundation Template.  I've tried altering the code but my coding knowledge is letting me down.

[bsmither]

The Foundation template main.php has this structure relevant to the top_header when viewing Medium or Large viewports:

<div class="row marg-top" id="top_header">
   <div class="small-4 large-3 columns">Logo</div>
   <div class="small-8 large-9 columns nav-boxes">
      <div class="row" id="nav-actions">
         <div class="small-12 columns">Login</div>
      </div>
      <div class="row show-for-medium-up">
         <div class="small-12 columns">Search</div>
      </div>
   </div>
</div>

The top_header is split 3 vs. 9 for Logo vs. everything else (the nav_actions row and search bar row).

What you can try to do is re-divide the columns into 3-6-3 <div> blocks.

Or, make the nav_actions blocks float left instead of right:

  <div class="row" id="nav-actions">
     <div class="small-12 columns">
        <div class="{* was right *}left text-center">{include file='templates/box.basket.php'}</div>
        <div class="{* was right *}left text-center show-for-small"><a class="left-off-canvas-toggle button white tiny" href="#"><i class="fa fa-bars fa-2x"></i></a> <a class="button white tiny show-small-search" href="#"><i class="fa fa-search fa-2x"></i></a></div>
        {include file='templates/box.currency.php'}{* edited file to have class left *}
        {include file='templates/box.language.php'}{* edited file to have class left *}
        {include file='templates/box.session.php'}{* edited file to have class left *}
     </div>
  </div>

 

[philippagreen]

Thank you, floating the blocks left instead of right has worked well.