Logo: Center your logo and navigation menu on desktop

This advanced customization will center your logo and navigation items below the logo. Example result:

Step 1 - Modify sections/header.liquid

In the Code Editor, open your sections/header.liquid file:

https://myshopify.com/admin/themes/current?key=sections/header.liquid&line=39

Around line 39 or use the Find feature (Command-F on Mac, Control-F in Windows), search for site-header

We will be replacing all the code from that line to just before the {% schema %} line:

Highlight all the code as shown - Starting with the <header line to the closing </div> before the schema line. Careful not to highlight or remove anything else. 

Sample of code to remove:

 <header class="site-header {{ section.settings.height }}" role="banner">
    <div class="wrapper">
      <div class="nav--desktop">
        {% include 'nav-contents' %}
      </div>
      <div class="nav--mobile">
        {% include 'nav-contents' %}
      </div>
    </div>
  </header>
</div>

Replace with the following code:

  <header class="site-header {{ section.settings.height }}" role="banner">
    <div class="wrapper">
      <div class="nav--desktop">
        <center> {% include 'nav-contents' %} </center>
      </div>
      <div class="nav--mobile">
        {% include 'nav-contents' %}
      </div>
    </div>
  </header>
</div>

Save the file.

Step 2 - Add CSS to assets/styles.scss.liquid

Open your styles.scss.liquid file from the assets folder (use this link if Pipeline is published):

https://myshopify.com/admin/themes/current?key=assets/style.scss.liquid&line=9999

Add any or all the following style code snips to the very bottom of the style.scss.liquid file:

To center your navigation items on desktop, use this code:

/* -- code to center nav items on desktop -- */
.nav--desktop .header-menu {
    text-align: center;   
}
/* - end - */

To add some padding above you logo (if required), add this code:

/* -- code to add padding above logo -- */
.header-logo {
    padding-top:1.5rem;
}
/* - end - */

(You can adjust the logo padding-top value from 1.5rem; to 1rem; or 1.25rem; for less padding above the logo or increase to 2rem; for more padding.)

Save the file after adding these style changes. 

 

Step 3: Optional - Increasing the breakpoint when switching to mobile from desktop:

Open your styles.scss.liquid file from the assets folder (use this link if Pipeline is published):

https://myshopify.com/admin/themes/current?key=assets/style.scss.liquid&line=9999

To maximize the width of your header space to help with additional navigation items, use this code:

/* -- code to widen header on desktop -- */
.site-header .wrapper {  
  @media screen and (min-width: $medium) {
      max-width: 100%;
      margin: 0 auto;
      padding: 0;

    }
}
/* - end - */
	

Next,

Open your shop.js.liquid file from the assets folder (use this link if Pipeline is published):

https://myshopify.com/admin/themes/current?key=assets/shop.js.liquid&line=516

Find this line:

  var widthLimit = $('.site-header .wrapper').width();
	

Replace that line with these two lines (both are required):

  var widthLimit = $('.site-header').width();
  var widthLimit = (widthLimit + 60);
	

Example:

Save the file after adding these style changes. 


 

Step 4: Optional - Reduce padding in navigation to decrease overall height

Before:

After:

Open your styles.scss.liquid file from the assets folder (use this link if Pipeline is published):

https://myshopify.com/admin/themes/current?key=assets/style.scss.liquid&line=9999

/* -- code to reduce desktop navigation padding -- */

.header--small .nav--desktop .header-menu>ul>li>a {
    padding-top: $gutter / 3;
    padding-bottom: $gutter / 3;
}

.header--medium .nav--desktop .header-menu>ul>li>a {
    padding-top: $gutter / 3;
    padding-bottom: $gutter / 3;
}

.header--large .nav--desktop .header-menu>ul>li>a {
    padding-top: $gutter / 3;
    padding-bottom: $gutter / 3;
}

.header--xl .nav--desktop .header-menu>ul>li>a {
    padding-top: $gutter / 3;
    padding-bottom: $gutter / 3;
}
/* - end - */
	

Save the file after adding these style changes. 

If that padding is too tight, you can change the values from:

$gutter / 3;
	

to:

$gutter / 2;
	

That will give you 15px rather than 10px of padding.


Notes

Important: Always perform code customizations on a backup of your theme (duplicate theme), then apply to the live theme once tested. 

Still need help? Contact Us Contact Us