How to make my navigation transparent

Result Desktop:

On a new line, add the following code to the very bottom of your assets/style.scss.liquid file.
Or if you have a published version of Pipeline, click on this link:

https://myshopify.com/admin/themes/current?key=assets/style.scss.liquid&line=9999

Option 1: Homepage navigation

@media only screen and (min-width: $medium) {
  .template-index .site-header {
    position: absolute;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.0);
    border-bottom: none;
  }
}

Option 2: Homepage and Collections

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

@media only screen and (min-width: $medium) {
  .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;
  }
  .template-collection h1.title {margin-top: 30px;}  
}

Option 3: Homepage and Blogs

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

@media only screen and (min-width: $medium) {
  .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;
  }
}

Option 4: Homepage, Collections & Blogs

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

@media only screen and (min-width: $medium) {
  .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;
  }
  .template-collection h1.title {margin-top: 30px;}  
}

Option: Semi-transparency

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

0.0 is transparent, 0.9 is almost black. 

Semi-transparent Result:

Semi-transparent with a white background:

For that, use:

White Semi-Transparent Code for homepage:

@media only screen and (min-width: $medium) {
  .template-index .site-header {
    position: absolute;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.3);
    border-bottom: none;
  }
}

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:

@media only screen and (min-width: $medium) {
  .template-page .site-header{
    position: absolute;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.0);
    border-bottom: none;
  }
  .template-page h1 {margin-top: 30px;}
}

Notes:

Save the file after adding your code. 

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

Try a semi-transparent with black background.


Making a transparent mobile navigation

With a mobile navigation, the drop-down would become transparent as well. For that reason, we've excluded the transparency to allow a better experience for mobile shopping. There is a modification you can use that will provide transparency for mobile and include a white background for the drop-down. You can use this code instead which will give you that effect:

Option 1: Homepage navigation with white background

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

@media only screen and (max-width: $medium) {
  .main-menu {
    background-color: white;
    padding:1rem;
  }
}

Option 2: Homepage navigation with dark background

.template-index .site-header {
    position: absolute;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255,255,255,0);
    border-bottom: none
}

@media only screen and (max-width: 768px) {
  .main-menu {
    background-color:#5d5d5d;
    padding: 1rem;
  }
  .main-menu-dropdown {
    background-color:#5d5f5f;
  }
  .main-menu li a {
    color:#FFFFFF;
  }
}

Still need help? Contact Us Contact Us