Support » Themes and Templates » Twenty Twelve style regular menu only

  • Resolved zeaks


    Is there any way to target just the regular menu in Twenty Twelve without the CSS also causing changes to the mobile menu?
    I’ve searched through the CSS and used firebug but it seems that it’s only possible to target the mobile menu.

    This means if I style the regular menu, I’ll have to re-style the mobile menu to counter anything I’ve done.

    I hope I’m wrong and just missing something.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Andrew Nevins


    Forum moderator

    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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Twenty Twelve style regular menu only’ is closed to new replies.