Menu Text color over-riding all pages except home page

Hi there,

This is my site - eqthinking.vikainnovations.com. Tried adding the below code in additional css.

.menuStyle1 .site .sticky-wrapper .site-header {
      background-color: transparent !important;
    }

    .menuStyle1 .site .sticky-wrapper.is-sticky #masthead.site-header {
      background-color: #ffffff !important;

    }
    .menuStyle1 .site .sticky-wrapper.is-sticky #masthead.site-header a {
			color: #000000 !important;
}

Now, you see, it works flawlessly in the home page. But, also gets a transparent header in other pages. I want to change the text color of other pages’ menu items to black. While it appears and also on scroll. Could you help me with that?

Regards,
Visalini

Hello V,

You can add this code to change the menu color on other pages:

body:not(.home) .main-navigation a, body:not(.home) .fa-search {
    color: black;
}

Regards,

Dear Awan,

Thanks a ton! It works flawless now. :slightly_smiling_face:

But the menu hamburger icon is also in white color. How to change it to black color for all pages except home page?

Regards,
Visalini

I see… add this:

@media (min-width: 901px){
    .menuStyle1 .mobile-menu-toggle_lines, .menuStyle1 .mobile-menu-toggle_lines:after, .menuStyle1 .mobile-menu-toggle_lines:before {
        background-color: red !important;
    }
}

But this changes in home page also.

And, needs to be white in homepage while being black in other pages.

Kindly help.

Regards,
Visalini

Oh… change the last code with this please:

@media (min-width: 901px){
    body:not(.home) .menuStyle1 .mobile-menu-toggle_lines, body:not(.home) .menuStyle1 .mobile-menu-toggle_lines:after, body:not(.home) .menuStyle1 .mobile-menu-toggle_lines:before {
        background-color: white !important;
    }
}

Hamburger icon color is not changing in any page.

It is still white everywhere.

In homepage only, it should be white. And other pager black.

Please help.

Regards.

Hi,

I’ve just investigate your site again and try to implement this code below. It’s working for mobile screen and desktop screen, and for home page and another pages as you asked.

.sticky-wrapper.is-sticky .mobile-menu-toggle_lines, .sticky-wrapper.is-sticky .mobile-menu-toggle_lines:before, .sticky-wrapper.is-sticky .mobile-menu-toggle_lines:after {
    background-color: black;
}
.mobile-menu-active .mobile-menu-toggle .mobile-menu-toggle_lines {
    background: transparent !important;
}
@media (min-width: 901px){
    .menuStyle1 .site .sticky-wrapper.is-sticky #masthead.site-header a{
        color: white !important;
    }
    .menuStyle1 .site .sticky-wrapper.is-sticky #masthead.site-header .current_page_item  a{
        color: red !important;
    }
    body:not(.home) .mobile-menu-toggle_lines,
    body:not(.home) .mobile-menu-toggle_lines:before,
    body:not(.home) .mobile-menu-toggle_lines:after {
        background-color: black !important;
    }
}

@media (min-width: 1200px){
    .menuStyle1 .site .sticky-wrapper.is-sticky #masthead.site-header a{
        color: black !important;
    }
    .menuStyle1 .site .sticky-wrapper.is-sticky #masthead.site-header .current_page_item  a{
        color: red !important;
    }
    body:not(.home) .main-navigation a, 
    .menuStyle1 .fa-search{
        color: black;
    }
}

If it’s still not working, please create a temporary login detail to your site then send it to me via private message and let me update the CSS code directly to your site

Regards,

2 Likes

Dear Awan,

Thanks a lot. It worked flawlessly!

You saved my day!

Regards,

2 Likes