Support » Theme: Leaf » Selected menu item

  • Resolved NCRoma


    Newbie question incoming:

    I wish to find the css anotation for the main navigation menu selected item, so I can put in some color on the text. Any tips of where it is in the style.css?

    Many thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • In your style.css change these:

    .main-navigation li a:hover {
    	color: #yourcolor;

    for the main navigation on mouse over

    .main-navigation li ul li a:hover {
    	background: #444;
    	color: #yourcolor;

    for the drop down-menu on mouse over

    .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: #yourcolor;
    	font-weight: bold;

    for the current page or category

    If you want to have the current sub-category also to be highlighted with a custom color,
    also change this:

    .main-navigation .sub-menu .current-menu-item > a,
    .main-navigation .sub-menu .current-menu-ancestor > a,
    .main-navigation .sub-menu .current_page_item > a,
    .main-navigation .sub-menu .current_page_ancestor > a {
    	color: #yourcolor;

    replace ‘yourcolor’ with the color of your choice. Should work ๐Ÿ™‚ Let me know



    Forum Moderator

    No! Do not edit the theme itself. First create a child theme for your changes. Or install a custom CSS plugin.

    For the hex color code, I think itยดs the best to use the accent color of your website, which is defined in Leaf Options.

    Resolved! Sadly I am far too into this to go and start all over again in a child theme ๐Ÿ™ But next time I’ll know that is the right thing to do! Thanks!



    very helpful!!! thank you!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Selected menu item’ is closed to new replies.