Changing Nav Colors with CSS

  • avahidesign

    (@avahidesign)


    4 years, 9 months ago

    I have been trying to change the navigation colors. Am I unable to change them with regular CSS? On that page I have :

    .main-navigation .main-nav ul li[class*="current-menu-"] > a {
	background-color: #ffffff00;
	color: #000;
}
.main-navigation .main-nav ul li a{
	background-color: #ffffff00;
	color: #000;
}

    But the nav links still have a white background. The CSS even shows it working in chrome inspect but I can’t actually override the colors.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Elvin

    (@ejcabquina)

    4 years, 9 months ago

    Hi there,

    Are you trying to make it transparent?

    If so, can you try adding this CSS?

    nav#site-navigation {
    background-color: transparent;
}
    Thread Starter avahidesign

    (@avahidesign)

    4 years, 9 months ago

    That worked! Follow up question: Why are there colors set at that level and why can’t I change it there? Just trying to understand my mistake.
    Edited to add: To change the hover color I have to change it the same way I did originally with the hover selector added. Seems odd that they are set at different levels.

    • This reply was modified 4 years, 9 months ago by avahidesign.
    Elvin

    (@ejcabquina)

    4 years, 9 months ago

    nav#site-navigation, which is the menu item’s ancestor element has white background which was inherited from body tag.

    That’s what you see when you turn the menu item’s background transparent. 😀

    Thread Starter avahidesign

    (@avahidesign)

    4 years, 9 months ago

    Thank you! It is obviously too late because I just realized that both have to be changed for the desired effect.Thanks for the fast response.

    Elvin

    (@ejcabquina)

    4 years, 9 months ago

    No problem. Glad to be of any help. 😀

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

The topic ‘Changing Nav Colors with CSS’ is closed to new replies.