Change colour of Active Nav in Header - Debut Theme

[VanIslandWhale]

Hello,

I'd like to have the current active navigation link in the Header a different colour (#0D4848) than the rest of the navigation to make it more obvious which tab you are currently on. I've included a screenshot from the parent site for reference.

Website: https://vanislandwhale.myshopify.com/

Thank you!

[suyash1]

@VanIslandWhale  please add this css to the very end of your theme.css file and check

.site-nav--active .site-nav__link--active:hover{color: #0D4848 !important;}

[VanIslandWhale]

Hi,

Unfortunately, this doesn't appear to have worked. I am not seeing any difference.

[suyash1]

@VanIslandWhale - can you accept me as collab? I will send request and do it and let you know what changes I did.. you need not give all the rights, just theme code rights will work

[ZenoPageBuilder · Accepted solution]

Hello @VanIslandWhale 👋

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.site-nav__link--active {
    color: #0D4848 !important;
}

The result

Hope that helps.

[VanIslandWhale]

Hi,

I don't see Base.css as an option in Shopify Admin.

[ZenoPageBuilder]

For your theme, you can place the code at the bottom of theme.css

[VanIslandWhale]

Hi there,

Sadly this doesn't seem to be working? It appears to be staying white on my end

[VanIslandWhale]

Nevermind I got it working! Thank you so much!

[ZenoPageBuilder]

You are welcome!

[INA_MSWEB]

Hi @VanIslandWhale 

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the theme.css file:

.site-header, .site-header__mobile-nav {background-color: #0D4848 !important;}

Regards,

San

[VanIslandWhale]

Hi,

This changed the background of the whole header. That is not what I am wanting to do. What ZenoPageBuilder posted above is what I am hoping to do.