Change font color for a SINGLE menu item

  • I’ve read every one of the other related support topics and googled this for hours. Other solutions to this problem are not working for me. All I want to do is change the font color for the item-54 menu item. Here’s the related code I want to add to / change:

    /* nav */
#nav {
	margin: 30px 0 20px 0;
	border-top: 1px solid #CFCFCF;
	border-bottom: 1px solid #CFCFCF;
	text-align: center;
}

#nav ul {
	list-style: none;
	margin: 0px;
    font-size: 12px;
}

#nav ul li{
    position: relative;
    display:inline-block;
    margin-left:-4px;
    text-align:left;
}

#nav ul li a {
    color: #6c6c6c;
    display: block;
    letter-spacing:1px;
    font-family: 'Rokkitt', serif;
    line-height: 22px;
    position: relative;
}

#nav ul li a:hover, #nav .current-menu-item > a, #nav .current-menu-ancestor > a, div#nav ul .current_page_item > a {
    color: #9A6614;
}

#nav > ul li, #nav .menu > ul li {
    padding: 8px 0;
}

#nav > ul li a, #nav .menu > ul li a {
    padding: 0 25px 0 25px;
    border-left: 1px solid #CFCFCF;
}

#nav ul li:first-child a{
	border-left: 0px;
}

    Here’s what I’ve been trying to find the right syntax for:

    #nav #item-54 strong {
	color:#f7941e !important;
}

    [please mark any posted code – or, for css code, even better, post a link to your site – https://codex.www.ads-software.com/Forum_Welcome#Posting_Code ]

    Thanks,
    Mike

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

  • you will need to style the link;

    possibly try:

    #item-54 a span strong { color: #123edf!important; }

    Thread Starter bouncebackdata1

    (@bouncebackdata1)

    I tried your code. am I supposed to put “#nav #item-54 a span strong …”? I just started with the #item.

    What else can I try?

    the code assumes that you have a menu item with the id #item-54 – which I could not find on your site.

    what menu item (top-menu or dropdown? which name?) are you targeting?

    Another option (perhaps more flexible) would be to assign a class to the menu item within the menu editor in WordPress.

    To do so, open the Screen Options dropdown at the top of the Menus editor page and tick the CSS Classes checkbox.

    You will then see an extra field in each menu item named CSS Classes (optional). Enter the CSS class you’d like to use here e.g. menu-highlight or featured-item

    Then in your css file, you can style it using something like:

    .featured-item {
background-color: #FFFF00;
color: #000;
}

    or to be more specific to your code:

    #nav ul li a.featured-item {
background-color: #FFFF00;
color: #000;
}

    This approach will be able to cope with any changes to menu order e.g. if item-54 became item-57 due to site updates, etc.

    I use this approach to style my home link as an icon rather than taxt, and to apply a ‘highlight’ class to new / featured menu items

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Change font color for a SINGLE menu item’ is closed to new replies.