Tutorial: Sticky Navigation

In this tutorial we will create an effect for the navigation where the header stays at the top of the page - even when the customer scrolls.

Important: Before beginning, make a duplicate of your theme. The following code changes can break your store's theme.

The links for this tutorial will link to your live/published theme. If your shop is not currently selling, then make a duplicate/backup and keep that as a backup so you can rollback in case you make any mistakes or want to go back to the original selection drop-downs. If you're store is selling products right now, I would make a duplicate and work out of the duplicate version. You'll need to manually find the folders in the code editor for that duplicate or development version.

1

Add code to your theme's Javascript file

Next, open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

Add the following code to the very bottom of your Javascript file, this will vary depending on which version of Pipeline you're running: 

Which version of Pipeline am I using?

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

assets/theme.js

Quick link if your theme is live/published Pipeline 4:  
assets/theme.js

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

assets/shop.js.liquid

Quick link if the theme is live/published and an earlier version of Pipeline:
assets/shop.js.liquid

Use the find feature in the Code Editor (Command-F on a Mac or Control-F in Windows) and search for

$(window).resize

Find box (1), search result (2)

Find the resize function with a listing of function calls:

Reference:
Pipeline 4, around line 1252
Pipeline 3, around line number 590
Pipeline 2, around line number 533

2

Add two lines of code

Add these two lines before before the end of the section:

  var headerMargin = $('.header__wrapper').height();
  $(".main-content").css("margin-top", headerMargin);

Example:

Be sure it's before the line that has:

}).resize();

3

Add style code to your CSS file

Next we'll add some style code to a different file. I'll start with the code options first and follow with which file to add the code to. 

Important: Don't add this code to the same file as the previous steps.

Option 1: Sticky for all pages

/* -- code for sticky navigation all pages -- */
.header__wrapper {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}
.page-margin{
  margin-top: 0;
  padding-top: 60px;
}
.site-header .nav--mobile{
  max-height: 95vh;
  overflow: auto;
}
/* -- end -- */

Both the topbar and header navigation will be sticky:

Option 2: Sticky for homepage only

If your theme is having margin issues at the top on other pages, try this version instead. This will make your navigation sticky for the homepage only:

/* -- code for sticky navigation homepage only version -- */
.template-index .header__wrapper {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}
.template-index .page-margin{
  margin-top: 0;
  padding-top: 60px;
}
.template-index .site-header .nav--mobile{
  max-height: 95vh;
  overflow: auto;
}
/* -- end -- */

<h4>Option 3: Exclude the top-bar from sticky effect</h4>
<p>
	 If you want to exclude your announcement bar from being sticky, there is this version you can try. However, the navigation menu will be pushed down slightly:
</p>
<pre class="callout-green">
/* -- code for sticky navigation no topbar for all pages -- */
.site-header {
  position: fixed;
  width: 100%;
  z-index: 1000;
}
.page-margin{
  margin-top: 0;
  padding-top: 60px;
}
.site-header .nav--mobile{
  max-height: 95vh;
  overflow: auto;
}
/* -- end -- */

This option doesn't flush the menu at the top, it will sit slightly down but does remove the topbar after scrolling:


Where do I add the style code?

Find the file in your 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

Quick link if the theme is live/published:
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

Quick link if the theme is live/published and an earlier version 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. 

Example:

Save the file after adding your code.


Code to fix headings that are overlapping

If you're finding that Collection page headings and Page headings are overlapped by the sticky navigation:

Try this style code:

/* -- added to fix header issue with sticky navigation -- */
.template-collection, 
.template-page, 
.template-product, 
.template-blog,
.template-cart { margin-top: 60px;}      
/* - end - */

You may need to tweak the value of 60px based on your header size.

If the first asset on your homepage is covered by the sticky navigation, then try this code:

/* -- added to fix homepage overlap -- */
.main-content {margin-top: 90px !important;}
/* - end - */

Still need help? Contact Us Contact Us