Twenty Twelve style regular menu only

What if you define media queries widths to say, 1020px, for which ever style you’re applying to the menu? Will that affect the mobile version?

That might be a way around it.

I’d be really surprised if there wasn’t a class specific to the main menu though. If I so much as add padding to it, or a background it’ll mess with the mobile menu.

Thanks for the @media idea, I’ll try that out.

Using @media screen and (min-width: 600px) around my menu modifications seems to work perfect. Thanks again for the idea.

Can you possibly provide the full code for how you did this? I too would like to restyle my main menu and cannot figure it out, and do not understand the media queries note above.
Thank you!

Anything inside the @media brackets will be shown for desktop, anything without @media is shown on mobile.

Here’s an example..

This should make the menu link color red on desktop, but not affect the mobile menu.

@media screen and (min-width: 600px) {
     #access a {
        color: red;
     } <-- Normal CSS closing bracket
} <-- closing bracket for @media

If we used this, it would change the color for both mobile menu and regular desktop menu.

#access a { color: red; }

So, if you just want to change the regular desktop view menu and not the mobile menu, add your CSS between this..

@media screen and (min-width: 600px) {

Regular CSS here

} <-- don't forget the closing bracker for @media

Twenty Twelve was made for mobile first, then using @media conditionals it was made to fit desktop screen sizes. It’s confusing at first, once you understand what it’s doing, it’s pretty easy to figure out.