[Resolved] Possible to set primary navigation background color for mobile only?

[Eric]

My site uses primary navigation with a transparent background on top of the headers. This works fine on desktop, but in mobile the opened navigation overhangs the header and I end up with invisible white text on white. Is there a way to set a primary navigation background for just mobile and tablet, but not desktop?

My site is: http://lachoreographersanddancers.org/lacd_newsite/

GeneratePress 2.0.2

[Leo]

Hi there,

Try this CSS:

@media (max-width: 768px) {
    .main-navigation .main-nav ul li a,
    .main-navigation .main-nav ul li a:hover {
        background-color: #000;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Eric]

Thanks, Leo, that’s working for me! Just one more question: what code would I use to set the background hover color on that tablet/mobile primary navigation? Now the background-color is just disappearing on hover.

[Leo]

Edited the code above.

It shouldn’t matter though as there is no hover on mobile touch screens.

Let me know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Eric]

That solved it, Thank you!

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts