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 to add the style code:

Find the right file in the left Assets folder:

Pipeline 4 - If you're working with a draft theme, open this file:

You'll be opening this file:

assets/theme.scss.liquid

Earlier versions of Pipeline - If your theme is older than Pipeline 4 open this file for draft themes:

You'll be opening this file for earlier versions of Pipeline:

assets/style.scss.liquid

Add the code to the very bottom of the file on a new line. Make a couple blank lines before pasting the code snippet. 

Save the file after adding your 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: 

Pipeline 4 - If you're working with a draft theme, open this file:

assets/theme.js

Earlier versions of Pipeline, you'll be opening this file:

assets/shop.js.liquid

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:

Pipeline 4 - If you're working with a draft theme, open this file:

You'll be opening this file:

assets/theme.scss.liquid

Earlier versions of Pipeline - If your theme is older than Pipeline 4 open this file for draft themes:

You'll be opening this file for earlier versions of Pipeline:

assets/style.scss.liquid

Add the code to the very bottom of the file on a new line. Make a couple blank lines before pasting the code snippet. 

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.


Need help with code changes?

We're not able to make any code customizations but we can recommend shophelper.io and heycarson -- they both specialize in small code changes and have really competitive flat-rate pricing. 

Still need help? Contact Us Contact Us