Support » Themes and Templates » How to highlight color in menu?

Viewing 10 replies - 1 through 10 (of 10 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    I used Google Chrome’s built in Inspect Element tool and found this on your ‘Home’ link;

    <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-22"><a href="http://wpa.greenresourcegroup.com/">Home</a></li>

    It shows the current menu item is labeled through the class, “current-menu-item” ont the <li> element.

    You can use the class as the selector for CSS styles.

    Thanks Andrew for quick answer.
    I have add`.current-menu-item {
    color: 99CC00;
    }`
    in my css but nothing changes.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Remember text styles should be applied to text elements.
    In your case, try using the anchor tag.

    I am not so familiar with CSS so could you explain better how to write anchor tag.
    Thanks

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Try

    .current-menu-item a{
    color: 99CC00;
    }

    That references the following HTML;

    <li class="current_page_item">
     <a href="http://wpa.greenresourcegroup.com/">
     ...

    Also doesn’t work.
    I need to for all pages not just for home page.
    So when I am on current page , text in menu needs to be green.
    here is code:

    /* navigation */
    
    #mainnav {
    	margin: 0 auto;
    	display: block;
    	font-size: 13px;
    	text-transform: uppercase;
    	clear: both;
    	}
    
    #mainnav ul {
    	padding: 0;
    	margin: 0;
    	min-height: 27px;
    	}
    
    #mainnav ul li {
    	list-style: none;
    	position: relative;
    	float: left;
    	margin: 0 0 1px 0;
    	padding: 0;
    	border-bottom: none;
    	}
    
    #mainnav ul ul li {
    	padding: 0;
    	margin-bottom: 0;
    	border: none;
    	}
    
    #mainnav ul ul li a {
    	padding: 5px;
    	}
    
    #mainnav ul li a {
    	margin: 0;
    	display: block;
    	color: #ffffff;
    	padding: 3px 0 0 15px;
    	text-shadow: none;
    	text-decoration: none;
    	line-height: 38px;
    	background: #141414;
    	border-bottom: 1px solid #ccc;
    	}
    
    #mainnav ul li:last-child a {
    	padding-right: 15px;
    	}
    
    #mainnav ul li a:hover {
    	text-shadow: 0 1px 0 #000;
    	color: #99CC00;	
    
    	}
    
    #mainnav ul ul {
    	display: none;
    	float: left;
    	position: absolute;
    	top: 42px;
    	left: 2px;
    	z-index: 500;
    	font-size: 12px;
    	padding: 0;
    	padding-left: 8px;
    	background: #f0f0f0;
    	border-bottom: 1px solid #ccc;
    	}
    
    #mainnav ul ul ul {
    	left: 100%;
    	top: 0;
    	font-size: 12px;
    	}
    
    #mainnav ul ul a {
    	width: 9em;
    	height: auto;
    	line-height: 15px;
    	border: none;
    	}
    
    #mainnav ul li:hover > ul {
    	display: block;
    	}

    Cheers

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Try more specific selectors, or using !important at the end of your style.
    E.g

    #mainnav ul li.current-menu-item a {
     color: #99CC00;
     /* Remember you need the hashtag infront of hexadecimal colour values */
    }

    Or

    li.current-menu-item a {
     color: #99CC00 !important;
    }

    #mainnav ul li.current-menu-item a {
     color: #99CC00;
     /* Remember you need the hashtag infront of hexadecimal colour values */
    }

    WORKS, THANK YOU , PERFECT

    Cheers
    ANDREW

    esmi

    (@esmi)

    Forum Moderator

    And please don’t post whole chunks of CSS here. It’s pretty useless when taken out of the context of the site.

    Its CSS part which define menu,
    but ok I will care about that.

    Regards

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘How to highlight color in menu?’ is closed to new replies.