Archived topic
Possible to set primary navigation background color for mobile only?
5 replies · Started by Eric on February 12, 2018
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/
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/
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.
Edited the code above.
It shouldn't matter though as there is no hover on mobile touch screens.
Let me know.
That solved it, Thank you!
No problem :)
