[Resolved] How to make the Page Hero display overlay the theme plug-in setting

[zdaben]

I use the default setting and import the theme from the library, in use of a Page Hero, the menu can display over the page. but when use some plug-in(Max Megamenu)，the color setting doesn’t work. How can I make sure the Page Hero setting display first overlay other setting?

[David]

Hi there,

the Max Megamenu has its own CSS styles – so the element settings will not apply.
You would need some CSS like so:

.header-wrap #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    color: #fff;
}
/* Hover color */
.header-wrap #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a.mega-menu-link {
    color: #f00;
}

[zdaben]

Wow, it’s working! That’s what I want by the first step.

I use the CSS and all the menu font color has changed, both the main menu and the sticky menu. As the Sticky menu background color is gray, font can’t read clearly.

So, can I get the Page Hero menu setting working just on the front page, but the main menu on other page and the sticky menu keep the theme inherent settings？

[zdaben]

Thanks for your help!

I want get the separate menu font color setting, therefore menu font can be read clearly.

[David]

So this CSS will only apply to the No Sticky navigation with the Page Hero:

@media(min-width: 769px) {
    .header-wrap .main-navigation:not(.is_stuck) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
        color: #fff;
    }
    /* Hover color */
    .header-wrap .main-navigation:not(.is_stuck) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a.mega-menu-link {
        color: #f00;
    }
}

[zdaben]

Thanks David, Excellent and almost done!

Now the Color changed, Web site is just I want, but the mobile site has the question above.

Can the CSS just working on the Web site(visit by PC) , and Mobile site keep the setting?

[David]

I edited the CSS here:
https://generatepress.com/forums/topic/how-to-make-the-page-hero-display-overlay-the-theme-plug-in-setting/#post-1524960

This will apply only to the larger screen sizes.

[zdaben]

Thanks David, Things going on it’s way now!
One more question, I have disabled the sticky setting in the Max Mega Menu option. But the Sticky navigation setting doesn’t work in the theme setting yet.

Can I make the menu sticky only to the larger screen sizes(don’t stick on the mobile site)?

[David]

I don’t think thats possible with the Max Mega menu as that plugin changes the Navigation markup.

[zdaben]

Got it.

Problems solved with your timely support. Thanks again!

[David]

Glad to be of help

[Author]

Posts