WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Twenty Twelve style regular menu only (6 posts)

  1. zeaks
    Member
    Posted 1 year ago #

    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.

  2. Barrel rider
    Volunteer Moderator
    Posted 1 year ago #

    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?

  3. zeaks
    Member
    Posted 1 year ago #

    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.

  4. zeaks
    Member
    Posted 1 year ago #

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

  5. samantha1717
    Member
    Posted 1 year ago #

    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!

  6. zeaks
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic