put logo in nav bar

[jorrit]

Recently I moved from 1.6 to 1.7.6.7, and I'm looking for help putting the logo in te nav1 position and remove most of the white space between the nav bar and where the top menu module is.

 

 

 

[Gipsy]

Hi Jorrit,

I did it by editing the header.tpl file (themes/classic/templates/_partials/header.tpl). My prestashop's version is 1.7.6.1

I moved the logo into the header-nav block.

This is how I do it for my website:

{block name='header_nav'}
  <nav class="header-nav">
    <div class="container">
      <div class="row">
        <div class="hidden-sm-down">
                              <div class="col-md-2 hidden-sm-down" id="_desktop_logo">
          <a href="{$urls.base_url}">
            <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
          </a>
        </div>
                  <div class="col-md-7 col-xs-12">
            {hook h='displayNav1'}
          </div>
          <div class="col-md-3 right-nav">
              {hook h='displayNav2'}
          </div>
        </div>
        <div class="hidden-md-up text-sm-center mobile">
          <div class="float-xs-left" id="menu-icon">
            <i class="material-icons d-inline">&#xE5D3;</i>
          </div>
          <div class="float-xs-right" id="_mobile_cart"></div>
          <div class="float-xs-right" id="_mobile_user_info"></div>
          <div class="col-xs-6 hidden-md-up" id="_mobile_logo"></div>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
    
  </nav>
{/block}

 

{block name='header_top'}
        <div class="col-md-12 col-sm-12 position-static">
          {hook h='displayTop'}
          <div class="clearfix"></div>
      <div id="mobile_top_menu_wrapper" class="row hidden-md-up" style="display:none;">
        <div class="js-top-menu mobile" id="_mobile_top_menu"></div>
        <div class="js-top-menu-bottom">
          <div id="_mobile_currency_selector"></div>
          <div id="_mobile_language_selector"></div>
          <div id="_mobile_contact_link"></div>
        </div>
      </div>
    </div>
  </div>
  {hook h='displayNavFullWidth'}
{/block}

Hope it helps

[jorrit]

Hi Gipsy, thank you, exactly what I was looking for works great. The logo is not aligning in the middle as it does during the checkout, could you help me with that ?

 

Jorrit

[Gipsy]

You can try two ways

1) adding the class "top-logo" to your logo (always in your header.tpl):

 <div class="hidden-sm-down">
                              <div class="col-md-2 hidden-sm-down" id="_desktop_logo">
          <a href="{$urls.base_url}">
            <img class="logo img-responsive top-logo" src="{$shop.logo}" alt="{$shop.name}">
          </a>
        </div>

 

or you can add a padding-top in the .logo class in your custom.css file (themes/classic/assets/css/custom.css)

#header .logo {
    padding-top: 10px;
}

you can choose the value that better fits your needs (i think it should stay between 5px and 10px).

[jorrit]

Thanks that works great !