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 assets/shop.js or assets/theme.js file

If Pipeline is published (working with your main live theme), use this link to open:
assets/shop.js.liquid

If you're using Pipeline 4, use:
assets/theme.js

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

Apply style code to assets/style.scss.liquid

Add the following code to the very bottom of this file on a new line:
assets/style.scss.liquid

Or if you're using Pipeline 4:  
assets/theme.scss.liquid

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

Save the file.

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

Save the file.

Option 3: Exclude the top-bar from sticky effect

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:

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

Save the file.

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


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

Where to add style code:

Open your 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

Next, in the Code Editor find your theme's CSS file, this will vary depending on which version of Pipeline you're running:
Which version of Pipeline am I using?

Once you know your version, 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

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. 

Save the file after adding your code.

Still need help? Contact Us Contact Us