how to change the background colour and font for Sale tab on the navigation bar

New Member
4 0 0

Hello

What should I do in order to change a background color and a font of Sale tab on the nagivation bar. I searched around and tried some solutions from old posts but I could not get it worked. 

Thanks

0 Likes
Highlighted

Hi,

I might be able to help if you provide a link to your store or specify the theme.
Some changes in HTML and CSS of your theme can help.

Shopify subject matter expert | Founder at GenovaWebArt | Full-services shopify agency | info@genovawebart.com
0 Likes
New Member
4 0 0

Hi Arthur

Sorry for the delay. My current theme is Supply and my store's link is https://oowlstudio.com.

0 Likes

Hello Lenanguyen,

The simplest way to change a background color of Sale tab on the navigation bar is:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Choose "Edit code" from the "Actions" drop-down menu.
  3. On the Edit HTML/CSS page, you can edit the Assets / theme.scss.liquid file.
    You should find the following lines in the file (the code is about 3199 line):
    .site-nav {
      margin: 0;
      font: {
        family: $accentFontStackBold;
        weight: $accentFontWeight;
        size: {{ settings.type_navigation_size }};
      };
      {% if settings.type_navigation_transform %}
      text-transform: uppercase;
      {% endif %}
      cursor: default;
    
      li {
        margin: 0;
        display: block;
      }
    
      a {
        display: block;
        text-decoration: none;
        padding: $gutter/2;
      }
    
      .customer-navlink {
        color: $colorNavText;
        background-color: lighten($colorNav, 15%);
        border-bottom: 0;
        border-top: 1px solid lighten($colorNav, 5%);
        margin-top: -1px;
      }
    }
    
    /*================ Small screen nav styles ================*/

    Add new lines and Save:
    .site-nav {
      margin: 0;
      font: {
        family: $accentFontStackBold;
        weight: $accentFontWeight;
        size: {{ settings.type_navigation_size }};
      };
      {% if settings.type_navigation_transform %}
      text-transform: uppercase;
      {% endif %}
      cursor: default;
    
      li {
        margin: 0;
        display: block;
      }
    
      a {
        display: block;
        text-decoration: none;
        padding: $gutter/2;
      }
    
      .customer-navlink {
        color: $colorNavText;
        background-color: lighten($colorNav, 15%);
        border-bottom: 0;
        border-top: 1px solid lighten($colorNav, 5%);
        margin-top: -1px;
      }
    }
    
    //NEW LINE -  to change a background color of Sale tab on the navigation bar
      
    .site-nav a[href="/collections/sales"] {
        background-color: #9d9bb6;    
        // custom styles
    }
    /*================ Small screen nav styles ================*/

     

You can substitute any color for the background (for example, one of these #e15554 / #52489c / #9d9bb6 / #bcb3b5 / or your own).
You can also add other styles that you want to apply for this menu item.

genovawebart-for-oowlstudio-change-nav

I hope it helps.

Best,
Arthur

Shopify subject matter expert | Founder at GenovaWebArt | Full-services shopify agency | info@genovawebart.com
1 Like
New Member
4 0 0

thanks Arthur. Another quick question, the change can not be seen unless you hit Save. Preview does not show the change. Any ideas 

0 Likes
Shopify Expert
9778 86 1524

You might want to add the custom code to the very bottom of the stylesheet vs in the middle. It will be easier to find later, and have a greater chance of overriding existing styles. Up to you on that on.

As for the preview - you need to save the css to see the change. 

In general, you should test changes in a theme copy first vs editing the live theme (unless you are really sure you know it will work). Duplicate the theme and test things in the copy.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
1 Like
New Member
4 0 0

Very good advice for programming. Thanks Jason

0 Likes