How to make my navigation transparent

This customization allows you to have a transparent navigation.

Example result for Desktop:

Mobile:

Quick and easy method - Use this for homepage transparency

Code to use:

/* -- code for transparent header homepage -- */

  .template-index .site-header {
    position: absolute;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.0);
    border-bottom: none;
  }
.nav--mobile .accessibleNav { background-color: $colorNav; }

/* - end - */

Where do I add the 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. 

Example:

Save the file after adding your code.


Intermediate to Advanced: More transparency options:

Use one of the following code snippets to create the transparent navigation. The code is added to a file based on the version of Pipeline you're using, more information below the code snippets. 

Option 1: Homepage navigation only

/* -- code for transparent header homepage -- */

  .template-index .site-header {
    position: absolute;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.0);
    border-bottom: none;
  }
.nav--mobile .accessibleNav { background-color: $colorNav; }

/* - end - */

Option 2: Homepage and Collections

If you'd like your homepage and collection pages to be transparent, use this code instead:

/* -- code for transparent header homepage and collections -- */
.template-index .site-header, .template-collection .site-header {
    position: absolute;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.0);
    border-bottom: none;
  }
.nav--mobile .accessibleNav { background-color: $colorNav; }

/* - end - */

Option 3: Homepage and Blogs

To make your homepage navigation transparent and all blog post pages with a transparent navigation, use this code instead:

/* -- code for transparent header homepage and blogs -- */
  .template-index .site-header, .template-article .site-header {
    position: absolute;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.0);
    border-bottom: none;
  }
.nav--mobile .accessibleNav { background-color: $colorNav; }

/* - end - */

Option 4: Homepage, Collections & Blogs

To make your homepage, collection pages and blog posts all with a transparent navigation, use this code instead:

/* -- code for transparent header homepage, collections and blogs -- */
  .template-index .site-header, .template-collection .site-header, .template-article .site-header {
    position: absolute;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.0);
    border-bottom: none;
  }
.nav--mobile .accessibleNav { background-color: $colorNav; }
/* - end - */

Option: Semi-transparency

To make your navigation semi-transparent, you can modify this value:

Example of semi-transparent with a white background (255, 255, 255, 0.2):

0.0 is transparent, 0.9 is almost black. 

Example of semi-transparent result using black background (0, 0, 0, 0.2):

Sample code for white background semi-transparent, homepage:

/* -- code for semi-transparent white header homepage -- */
  .template-index .site-header {
    position: absolute;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.2);
    border-bottom: none;
  }
.nav--mobile .accessibleNav { background-color: $colorNav; }
/* - end - */

Sample code for black background semi-transparent, homepage:

/* -- code for semi-transparent black header homepage -- */
  .template-index .site-header {
    position: absolute;
    width: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.2);
    border-bottom: none;
  }
.nav--mobile .accessibleNav { background-color: $colorNav; }
/* - end - */

Option: Custom Pages

If you've used a custom banner from our homepage section tutorial with your Shopify Pages, then add this code to provide a transparent navigation:

/* -- code for transparent header on Shopify Pages -- */
  .template-page .site-header, .template-index .site-header {
    position: absolute;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.0);
    border-bottom: none;
  }
.nav--mobile .accessibleNav { background-color: $colorNav; }
.template-page h1 {margin-top: 30px;}
/* - end - */

Theme Color Settings

Be sure to adjust your top bar and header colors in the theme settings. These are the settings I've use for the example images:

The dark header background color provides a dark drop-down menu or meganav drop-down and the white text color provides the white navigation links:

Drop-down example:

The dark top bar color provides a dark navigation border color. 

When changing the top bar colors to a white background and dark text, the boarder colors will standout:

Mobile drop-down is also using the Header background setting:


Sticky Navigation

Be careful about adding this change if you already have a Sticky navigation. Here's what could occur with both:

Try a semi-transparent with black background.

Still need help? Contact Us Contact Us