WordPress.org

Ready to get started?Download WordPress

Forums

changing menu font size and color in twenty twelve (4 posts)

  1. lauralavernia
    Member
    Posted 1 year ago #

    Greetings,

    I am a coding neophyte and I need to change the menu font and size for my twenty twelve child theme. I have installed WP google fonts editor and have managed to change the font of the child theme. I have copied the stylesheet from the parent, but none of the changes that I make to it stick.

    I have added the @import css command to the beginning of my child's css.

    I just want to make the font a larger rem size and black in color.
    PLEASE help me. thank you.

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    I have copied the stylesheet from the parent

    No - the child's stylesheet should only contain:
    - the comment block at the top
    - the @import of the parent's stylesheet
    - your new CSS

    Try using Firefox with the Firebug add-on to locate the CSS that you need to over-write in the child's stylesheet. Or use whatever developer tool is available in your web browser.

  3. lauralavernia
    Member
    Posted 1 year ago #

    Thanks for the advice! So, i did what you said and these are the contents of my child's css stylesheet:

    [Excessive CSS moderated. Please just post a link to your site.]

    FOR SOME INEXPLICABLE REASON, THE ENTIRE WIDTH OF THE SITE INCREASED...not sure how I was able to muck that up---I tell you, I'm dangerous. Any advice and friendly scolding would be much appreciated!

  4. paulwpxp
    Font hero
    Posted 1 year ago #

    For some inexplicable reason, the entire width of the site increased

    Sounded like you changed font size to the wrong element, probably to the html or body, Twentytwelve assigns its page width using rem which is a font size based to the one used in the root.

    This below is for changing font size in menu

    .main-navigation li {
    	font-size:16px;
    }
    @media screen and (min-width: 600px) {
    	.main-navigation li ul li a {font-size:14px;}
    }

    Changing color is a bit more complicated, it's 2 levels <a> in the list and hover color and active current page color, look inside the parent's style.css to investigate where to change those, and override them in child's.

Topic Closed

This topic has been closed to new replies.

About this Topic