Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!

Navigation bar color

jamie292929
Trailblazer
445 0 73

Hi 

 

could u provide some code to change the navigation  bar ("Home" "Products" "Deals" etc)  text colour cheers.

 

URL: appliancesclub.com

Theme: Warehouse 

 

Cheers

Replies 3 (3)
collinsmbaka
Shopify Partner
224 27 99

Hi @jamie292929 

 

Use this CSS to change the color of the navigation items

 

  1. From your Shopify admin dashboard
  2. Navigate to Online stores > Themes > Select the main theme
  3. Click on Actions > Edit code
  4. From the code editor, search for the theme.scss file
  5. Paste this code at the bottom of the file

 

li.nav-bar__item {
    color: green !important;
}

 

 

Note: Change the "green" to whatever hex value you want.

 

Cheers!

Collins Mbaka
Web Developer | Shopify Developer
Hire Me: collinsmbaka.com/about
Amlibolikha
Shopify Partner
54 9 13

Hi @jamie292929 ,

 

You can follow the instruction below:
 
1. Go to Online Store->Theme->Edit code  
2. Asset->/theme.scss->paste below code at the bottom of the file:

 

.nav-bar__linklist > li {
    color: #1e2d7c !important;
}

 

Hope it can help you.
diego_ezfy
Shopify Partner
2825 538 771

@

@jamie292929, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:

.nav-bar__item *,
.nav-bar__item > *{
    color: #303030;
}

.nav-bar__item.is-dropdown-open > *,
.nav-bar__item > *:hover,
.nav-bar__item > *:focus,
.nav-bar__item.is-dropdown-open > * *:hover,
.nav-bar__item > *:hover *:focus,
.nav-bar__item > *:focus *:focus{
     color: #bfbfbf !important;
}


This will work for mobile and also for the dropdown menus. 

The colors are just exemplary, you can change it for anything you wish:

#303030 = link color
#bfbfbf = link hover color

Kind regards,
Diego