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:

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 style code

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 as well:

/* -- 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.)

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code


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

Part 1

To maximize the width of your header space to help with additional navigation items, use this CSS style code (add to the same file as above):

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

    }
}
/* - end - */

Part 2 

Open your Javascript file (theme.js or shop.js), this will vary depending on which version of Pipeline you're running: 

Use this link to learn which Javascript file to use:

Where to add your Javascript code

Once you know the correct file to use - 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:

Code to use:

/* -- 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 - */

Add to your CSS styles file.

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

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.

Still need help? Contact Us Contact Us