Twenty Twelve – how to change navigation bar font color

  • Resolved jframst

    (@jframst)


    11 years, 5 months ago

    Hi there,

    I’m hoping someone can tell me how to change the font color for EACH ITEM in the top navigation bar in Twenty Twelve. website is: https://www.norfolkphysiotherapy.com/

    I’ve created a child theme, and figured out how to change the font colour for the whole navigation bar, but not each individual page.
    (Yes, I want something multi-coloured!)

    I have Firebug installed….but am 110% novice on it! I’ve no css experience either so don’t know if I’m simply putting something in the wrong place, or getting the syntax wrong.

    So if someone could tell me what line of code I need to change and what it should say that’d be really helpful!

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

  • What you are asking about can certainly be done, but it will likely require a page or two of code spread across two or more files by a well-seasoned Developer having a working knowledge of Twenty Twelve.

    Thread Starter jframst

    (@jframst)

    Would it be easier to have a different colour behind each navigation tab? ie. https://westtorontonaturopath.com/

    That’s what I’d *really* like to do!

    It’s not that hard – you just need to use the menu-item specific id in the CSS selector for each item’s style – so for example this one (Physiotherapy Guelph):

    <li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-27 current_page_item menu-item-82">

    CSS would be:

    .main-navigation li#menu-item-82 {
    background-color: #3F64A2;
}

    You can find that HTML using a browser tool.

    Also check on your child style.css file – looks like you have some errant ” ` ” in there.

    Thread Starter jframst

    (@jframst)

    WPyogi – a BIG thank you!! I could see the “menu-item-82” and figured that meant I could change each item…. but didn’t know how!

    So I changed all the background colours and it looked pretty bad! (Murphy’s Law!)

    Do you mind sharing with me the CSS to change the font colour for each item, please? I tried a few things….and nothing worked.

    Thanks!

    Do you mind sharing with me the CSS to change the font colour for each item, please? I tried a few things….and nothing worked.

    Since you want to change the color of the anchor (link) tag that’s the child of the list item, just create additional selectors by copying your existing ones for the menu items, adding an a to the end of the selector, and set the color property to whatever color you want:

    .main-navigation li#menu-item-82 a {
    color: red;
}

    If you want the text to remain the same color when the mouse is hovered over it, then add an additional selector for the hover state:

    .main-navigation li#menu-item-82 a,
.main-navigation li#menu-item-82 a:hover {
    color: red;
}

    Thread Starter jframst

    (@jframst)

    Thank you CrouchingBruin. That was *really* helpful to see the css I should be using, and how it’s written — with the “a”.

    Again, thanks for taking the time to help me out!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Twenty Twelve – how to change navigation bar font color’ is closed to new replies.