Change menu font and background color on media screens only

[londondeb]

Education Pro Vs 3.0.0

I have a site where I'm using Font Awesome for menus and have styled the Primary navigation to use a dark blue background with white icons and text. On media screens the menu's drop down over top of white space on the page so they don't show up well enough.

How do I change the font-awesome icon and text color on Primary navigation but only for media screens?

Thanks,
Debra

http://legalnursebusiness.com

[Brad Dalton]

Wrap your CSS rules in a media query

@media only screen and (max-width: 800px) {

Your CSS Rules

}

---

Tutorials for StudioPress Themes.

[londondeb]

Thanks for the help Brad - this is what finally worked I needed an extra set of { } in there to make it "stick"

@media only screen and (max-width: 768px) {
.nav-primary .genesis-nav-menu.responsive-menu li a {
background: none;
color: #000;
}
}

@media only screen and (max-width: 768px) {
.nav-primary .genesis-nav-menu.responsive-menu li a:hover {
background: none;
color: #e44a3c;
}
}

[Brad Dalton]

Good stuff!

---

Tutorials for StudioPress Themes.

[Author]

Posts