Problem with menu

  • Resolved pennywhistle

    (@pennywhistle)


    11 years, 4 months ago

    Hi,

    I’m modifying the Twenty Twelve Templet using a child theme. One problem I can’t figure out is why when I click on a page in the menu, does the word seem to expand? I only want it to turn blue, which it does, but that’s it.

    Here’s a link: https://www.suzannepettypiece.com/

    Thanks.

Viewing 9 replies - 1 through 9 (of 9 total)

  • This CSS in the parent theme:

    .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .main-navigation .current_page_item > a, .main-navigation .current_page_ancestor > a {
    color: #636363;
    font-weight: bold;
}

    note that it’s in a media query in the parent, so you may need to do that in the child theme as well.

    Thread Starter pennywhistle

    (@pennywhistle)

    Hi,

    Thanks for the help, but I don’t understand how to translate this to my child theme. I found the code in the parent theme, transferred it to my child theme and defined the font I’d like the menu to stay in, but still no fix.

    /* =Media queries
    ————————————————————– */

    /* Minimum width of 600 pixels. */
    @media screen and (min-width: 600px) {
    .author-avatar {
    float: left;
    margin-top: 8px;
    margin-top: 0.571428571rem;
    }

    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_ancestor > a {
    font-family: ‘Imprima’, sans-serif;
    color: #0099CC;
    font-size:16px;
    }

    .main-navigation li a {
    color: #000000;
    }

    try adding this to your child theme:

    .main-navigation .current-menu-item > a {
    font-weight: normal;
}
    Thread Starter pennywhistle

    (@pennywhistle)

    Thanks, Lemu. I tried adding that code, but still doesn’t work.

    You have a parse error in your child theme style.css file:

    https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.suzannepettypiece.com%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

    You have the media query line twice and as a result your closing brackets are messed up.

    To fix the issue in this thread, add the last style to this existing CSS in your child theme:

    .main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
font-family: 'Imprima', sans-serif;
color: #0099CC;
font-size:16px;
font-weight: normal;
}

    Thread Starter pennywhistle

    (@pennywhistle)

    Thanks. Adding that line worked, though I could have sworn I tried that before. As for the errors you point out (thanks), do I need to open a new thread to ask more questions on how to fix those? I don’t understand the validator report and would like to clean up the code to avoid issues later….

    Thanks again.

    You only need to worry about the one error in the child theme stylesheet – not all errors are true errors or problematic. That one error is because you have the @media query line in two places without the proper syntax around it – so remove this second instance of that line:

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

    it’s right above this:

    .site-header {
    padding-top: 0;
}

    Thread Starter pennywhistle

    (@pennywhistle)

    Fantastic. Thanks so much. All set here.

    Awesome :). That validator is a super tool if you start having CSS that won’t work – since a tiny syntax error can wipe out all subsequent code!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Problem with menu’ is closed to new replies.