Button Css stopped working for some reason

It may have stopped because i put a photo as the full background Not sure though. I am using elementir page builder.

Hi Max,

Try this CSS:

.generate-merged-header .main-navigation:not(.is_stuck):not(.toggled) .main-nav > ul > li[class*="current-menu-"] > a {
    background-color: #4e5e78;
}

Let me know.

If you don't want the hover to be transparent then try this:

.generate-merged-header .main-navigation:not(.is_stuck):not(.toggled) .main-nav > ul > li[class*="current-menu-"] > a, 
.generate-merged-header .main-navigation:not(.is_stuck):not(.toggled) .main-nav > ul > li[class*="current-menu-"] > a:hover 
.main-navigation .main-nav ul li[class*="current-menu-"] > a
.main-navigation .main-nav ul li[class*="current-menu-"] > a:hover {
    background-color: #4e5e78;
}

That did it Leo!

Will I have to use a similar targeting for the mobile navigation to change the tablet and mobile nav characteristics?

Thanks!

The CSS above is not desktop specific so you should be fine :)

ok cool!

Well, it seems that my css targeting the media isn't working now lol. It worked prior to merging the header with the background.

@media (max-width: 768px) {
.main-navigation a {
text-align: center;
color: black;

}
}

How would I now target the mobile and tablet characteristics?

I can't seem to make any changes unless I put "Important!"

And my button won't show up on the tablet or mobile either.

Any thoughts? I am messing around with the code now too.

I edited the code above: https://generatepress.com/forums/topic/button-css-stopped-working-for-some-reason/#post-276567

Looks like that CSS is still working to center the mobile items?