Modifying the mega menu

Hi raunhar,

I see you have it mostly working, but the sticky header background is grey instead of white. It is your theme applying the grey colour, so you’d need to look through your theme options to see if theres a way to change it, or contact your theme authors.

Then you would need to change the menu links to a dark colour only when the header is sticky, for some guidance on that please check the instructions at the bottom of this page:

https://www.megamenu.com/documentation/sticky-menu-background-color/

(The “Changing the menu link colors when the theme sticks the menu” section)

Regards,
Tom

I was able to change the background to white.
Now the issue is:
In the default state, when the site opens, The menu item is showing in black. On scroll up and internal pages, it is again black (which is no issue). But is the site aoyingmat.com the default menu item color is white and on scroll up or on internal pages, it is white.
Both sites are using Customizr Pro theme.
Please suggest

Hi raunhar,

On https://aoyingmat.com they have written custom CSS to change the font colour from white to black once the header becomes sticky.

For some guidance on doing that yourself, please check the instructions at the bottom of this page:

https://www.megamenu.com/documentation/sticky-menu-background-color/

(The “Changing the menu link colors when the theme sticks the menu” section)

Regards,
Tom

https://www.stone-veneers.net/new
I was able to do few more things. But, when I scroll up, the menu is in white. I need to show it in Black, and that too, only on scroll up.
Please suggest

Hi Raunhar,

You can use the following CSS to make the items black on the homepage, when the header is sticky:

.home .fixed-header-on #mega-menu-wrap-main #mega-menu-main > li.mega-menu-item > a.mega-menu-link {
  color: black;
}

Regards,
Tom

No change. It is still white on scrolling up.

This is css now:
.home .tc-header.header-transparent.no-borders:hover{
background-color:white;
}

.home .tc-header.header-transparent.no-borders:hover .nav__utils a {
color: black;
}

.home .tc-header:hover .hamburger-toggler__container {
filter: brightness(0)
}

.header-skin-dark .sticky-transparent.is-sticky .desktop-sticky .navbar-brand IMG, .header-skin-dark .sticky-transparent.is-sticky .mobile-sticky .navbar-brand IMG{
filter: NONE
}
.home .fixed-header-on #mega-menu-wrap-main #mega-menu-main > li.mega-menu-item > a.mega-menu-link {
color: black;
}

Hi raunhar,

I have checked and it is working for me on the homepage. The font colour is white, and it changes to black when the header is sticky. Please try clearing your browser cache.

Regards,
Tom

Thanks a lot. It works. Maybe the browser cache was an issue.
Thanks again