Change Navigation and Icon Color on Homepage ONLY

Store Design
1

Hi! Trying to figure out how to change the homepage navigation menu and icon colors to white while leaving the navigation menu and icon color black on all the other pages. I’ve tried everything! If anyone can help with code that would be great. Here’s the link: https://0hkb3kg3yapan6h4-15179972662.shopifypreview.com

2

Hello,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.css.liquid

.template-index a.site-nav__link.site-nav__link--main {
    color: white;
}
.template-index .site-header__icon .icon-search {
    color: white;
}
.template-index a.site-header__icon.site-header__account {
    color: white;
}
.template-index a.site-header__icon.site-header__cart {
    color: white;
}
3

Thank you! Worked perfectly!

4

Hi, @oscprofessional I added a dropdown menu to the navigation menu and it changed the color on the home page. Anyway I can change it back?

5

@oscprofessional Also, navigation menu doesn’t show on the mobile page.

6

@oscprofessional It’s the “Shop” dropdown in the Navigation Menu. Also, is there a way to change the “underline” when the page is selected and/or hovered over to white on the homepage only? Right now on the homepage it’s black and you can really see it when a page is selected/hovered over.

7

Hello kferguson1,
Add this css

.template-index .site-nav__link--active .site-nav__label {
    border-bottom-color: white;
}
.template-index li.site-nav--has-dropdown span.site-nav__label {
    color: white;
}
.template-index li.site-nav--has-dropdown svg.icon.icon-chevron-down {
    color: white;
}
8

Thank you that worked but the hamburger icon on the mobile homepage is still black. Is there a way to change that to white?

9

@oscprofessional Thank you that worked but the hamburger icon on the mobile homepage is still black. Is there a way to change that to white? Also, the code you gave me caused the dropdown menu background on the homepage to now have a white background, when before it was transparent. I like it white on the other pages, but on the homepage, I preferred the dropdown background transparent. Is that possible to do? Additionally, the lines under each of the menu items on hover are black. Is there a way to make them white on the homepage only? I know this is a lot but your help is greatly appreciated!

10

Add this css

.template-index .icon.icon-hamburger {
    color: white;
}
.template-index .site-nav__dropdown {
    background-color: transparent;
}