[Resolved] Menu Button Color / mobile

[Steig]

Hello,
This is a follow up to a post at https://generatepress.com/forums/topic/keep-primary-navigation-visible-at-top-of-page/#post-1075322.

I’ve implemented it per the links you provided and I can see the colored button on the desktop. Mobile, however showed the word menu instead of the actual menu item. I changed the Mobile Menu Breakpoint to zero px in the customizer and that cause the actual menu item to show in mobile. However, the colors don’t show. I thought it would just inherit what the desktop showed.

How do I fix that? It’s a simple enough structure, I just wanted the mobile to be identical to the desktop.

[Leo]

Edit this CSS:

@media (min-width: 769px) {
    .main-navigation .main-nav ul li.nav-button a {
        background-color: #ffb800;
        border: 2px solid #000000;
        color: #000000;
        line-height: 30px;
    }
}

to this:

.main-navigation .main-nav ul li.nav-button a {
    background-color: #ffb800;
    border: 2px solid #000000;
    color: #000000;
    line-height: 30px;
}

The @media (min-width: 769px) makes it desktop only:
https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints

Let me know if this helps 🙂

[Steig]

That did it; thanks!

[Leo]

No problem 🙂

[Author]

Posts