How to change the color in menu: (un)selected text and marker/selector

  • Unknown's avatar
    fredrikstrietz · Member ·

    Hi,

    I hope you can halp me. I want to be able to change the color in the menu via css script. I want to change the color of the selected text, the color of the unselected text and the color of the marker/selector.

    Here is a screenshot with my comment.

    My custom design is enabled, but these three color options are not changeable.

    Thanks!!!

    Regards
    Fredrik

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hello @fredrikstrietz, add the following to your custom CSS and adjust the colors as desired (these are the default colors).

    Unselected text color in dropdown menu

    .ot-menu li li a, .ot-menu li li a:visited {
    border: medium none;
    color: #000000;
}

    Selected text color in dropdown menu. The have used RGB color and set an opacity (the 0.8 on the right end). You can use RGB with opacity if you wish, or you can switch to a hex color code as is used in the other two bits of code.

    .ot-menu li li:hover, .ot-menu li li.sfHover, .ot-menu ul li a:hover, .navbar ul ul *:hover > a {
color: rgba(255, 255, 255, 0.8);
}

    Background of selected text in dropdown menu.

    .ot-menu li li a:focus, .ot-menu li li a:hover, .ot-menu li li a:active {
background: #000000;
}

    Let us know if you have any more questions.

  • Unknown's avatar
    fredrikstrietz · Member ·

    Thanks a lot! It works.
    That’s exactly what I want.

    One more question:
    When I choosed a main menu point (NOT one of the sub-points in the menu) and open the “sub menu”, then everything is marked black (Background color of this menu) because the main point is selected.
    Is it possible to change this black color?

    It’s a little bit difficult to explain – I hope you understand my question…

    Thanks in advance!!

    Fredrik

  • Unknown's avatar
    fredrikstrietz · Member ·

    This is what I mean – look at the screenshot:

    https://plus.google.com/photos/112654926568110091205/albums/5889967212413065073?authkey=COWTysHsyMi86QE

  • Unknown's avatar
    thesacredpath · Member ·

    That’s great, and I think you explained it well.

    For the background color of the submenus when you are on that parent page, you can change that color with this CSS. I’ve included the font color declaration just in case you need that as well. If you don’t, then you can delete the color declaration from the following.

    ot-menu .current_page_item li a, .ot-menu li .current_page_item a {
background: #000000;
color: #FFFFFF !important;
}

    Let us know if you have any further questions or have any problems.

  • Unknown's avatar
    fredrikstrietz · Member ·

    Thanks for that information. But I didn’t see any changes. The Background is still black. Please look at:

    https://plus.google.com/photos/112654926568110091205/albums/5889967212413065073?authkey=COWTysHsyMi86QE

    I selected the main point “Gesichtsbehandlungen”, then the website was loaded. Then I selected the dropdown menu and the background is still black. Can you help me?

  • kriskarkoski · Staff ·

    Your menu is showing in white for me.

    Can you try clearing your browser’s cookies and cache and then refresh your site and see if your menu is white?
    Browser Issues

  • Unknown's avatar
    fredrikstrietz · Member ·

    Hi,

    the menu is white if you didn’t have selected the main menu “Gesichtsbehandlungen” before. And that’s OK.

    What I want is to have the white background color if I first select the main topic “Gesichtsbehandlungen” and then opening the dropdown menu.

    I hope you can help me.

    Thanks!

  • kriskarkoski · Staff ·

    Thanks you for clarifying! The menu should now be white when the top-level menu item is selected, but please take a look and let us know if we can help you further.

  • Unknown's avatar
    fredrikstrietz · Member ·

    Hi,

    thank you very much!
    That’s exactly what I need.

    Regards,
    Fredrik

  • The topic ‘How to change the color in menu: (un)selected text and marker/selector’ is closed to new replies.