Color menu bar and text

  • I have the following css code. I want a green menu bar with white text, black active menu and submenu black. Also, I want black menu item with when the mouse hovers over, I currently get grey which I can bearly read. But that not what I can get.The submenu is unreadable. Have a look rather than me trying to explain.

    Help is much appreicated .

    /* Active page */
    .navigation-top .current_page_item > a {
    color: black;
    }
    /* The menu text colour */
    .navigation-top a,
    .menu-toggle {
    color: white;
    }
    /* color menu bar background */
    html .colors-custom .main-navigation ul,
    html .colors-custom .navigation-top,
    .navigation-top,
    .main-navigation ul {
    background:green;
    border-top:0;
    }
    /* Color sub menu text color*/
    .main-navigation a:link {
    color:black;}

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

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

  • Not quite sure what you are wanting, but this might help:

    /* makes menu items white */
.main-navigation a:link {
    color: white;
}

/* active and hover */
.main-navigation .current_page_item > a, 
.main-navigation a:hover {
    color: black!important;
}

    **Hex colour values
    For the colour white, you can also use (recommended) #ffffff
    For black, #000000

    Thread Starter bobferg

    (@bobferg)

    I got something to play with. I discovered that my desktop is showing better than my laptop. Will have to find a happy version for both and see how it works on the client’s computers.

    Thanks for the help.

    You are very welcome.

    Cheers,
    Andre

    Thread Starter bobferg

    (@bobferg)

    I have white menu items, black current item, and black hover items except for Calendar monthly hover doesn’t show the submenu Calendar daily unless the current page is Calendar daily. If you hover over calendar daily it shows a grey background with black text which is ok. So it is the hover over calendar monthly that is not showing the submenu unless it is the current page.

    Hello there,

    Go to the Appearance > Customize > Additional CSS (https://www.screencast.com/t/JSxqpr7lG) and paste code given below.

    .main-navigation .sub-menu li a:link{
color:#000;
}

    Best Regards

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Color menu bar and text’ is closed to new replies.