WordPress.org

Ready to get started?Download WordPress

Forums

How to change the smaller device menu colours in Twenety Twelve? (4 posts)

  1. acknowledged74
    Member
    Posted 8 months ago #

    Hi

    I am using the Twenty Twelve theme, which look fine.

    On small devices (I think below 600px) a menu button is shown and clicked to show the menu. At the moment you can't see it on my site because this menu is set the same as normal resolution,

    .main-navigation a {
    color: #FFFFFF;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight:normal;
    }
    .main-navigation a:hover {
    color: #000000;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight:normal;
    }

    the smaller device background is white and though on normal viewing its fine as the container is green this isn't there on the toggled device menu.

    Where do I set the a, and a:hover for the small devices menu?

    Much appreciated.

  2. mikedev
    Member
    Posted 8 months ago #

    To find the CSS used, shrink your browser window width until the mobile menu button appears. Then right click on the button and select "Inspect Element".

    In wp-content/themes/twentytwelve/style.css, see all instances of .menu-toggle. Find the ones that have colors associated with them, such as .menu-toggle, .menu-toggle:hover, and .menu-toggle:active. Copy them and strip away any class that is not .menu-toggle or else you'll be changing all the buttons in the theme. Change the colors in your new CSS.

    It is recommended to make your CSS changes in a child theme (http://codex.wordpress.org/Child_Themes) so that you can make changes that will not be over-written by a theme update.

  3. acknowledged74
    Member
    Posted 8 months ago #

    I appreciate the reply, the colours associated with .menu-toggle and its extensions only seems to be the button itself though not the navigation I'm afraid. Stripped back it looks like;

    [CSS code moderated - please post a link to your site]

  4. mikedev
    Member
    Posted 8 months ago #

    Sorry, I thought you were talking about the button, not the menu.

    You can find the menu CSS using the same "inspect element" browser tool. You will find the styles for the menu in /wp-content/themes/twentytwelve/style.css starting at line 576 titled "Navigation Menu". For browser widths above 600px, styles start at line 1475. Note that these are within the media query at line 1436 @media screen and (min-width: 600px).

    To change the menu for browsers below 600px, add to your child theme style.css the media query @media (max-width: 600px) { }. Then copy the relevant .main-navigation styles from the Twenty Twelve style sheet, paste them within the new media query and add or change the colors.

Reply

You must log in to post.

About this Topic