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

Navigation bar color

445 0 73



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



Theme: Warehouse 



Replies 3 (3)
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.



Collins Mbaka
Web Developer | Shopify Developer
Hire Me:
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.
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 > *:hover,
.nav-bar__item > *:focus, > * *: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,