This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

adjusting color of single menu item

Resolved 4 replies premiumthemetheme-vantage
d-_-b
10 years ago · Last reply by d-_-b 10 years ago

hi! i have a customer that wants to have just one of the menu items appear a different color. right now they are white and he would like one of them to be yellow (and if i know this customer he will want that capability on other items down the road).
how can i accomplish this?
thanks in advance!
d-_-b

URL: https://nectarcollector.org/

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

4
  1. Magus Staff 10 years, 7 months ago

    Hi D-_-b

    You will need to find the menu id of the item you want to change. To do this please right click on the menu item and select inspect element from the menu.

    Once you have the developer window open you will see the structure of the page expanded to the element you have chosen. If you look in the lines above the entry selected you will find the parent element. Please look through the class section to find the menu id entry

    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21" id="menu-item-21">
<a href="http://wisemans.magistercs.co.uk/sample-page/">Sample Page</a>
</li>

    In this example the menu id is

    menu-id-21

    Once you know this you can add the following to Appearance->Custom CSS

    #menu-item-21 {
    background-color: #ffffff;
}

    Please replace the Menu ID with the one you want to change and the colour to the colour you want the item to be.

    For more information on using the Browser developer tools to modify theme elements please see here

    https://siteorigin.com/basics/modifying-theme-design-with-custom-css/

    Let us know how you get on

    Magus

  2. d-_-b 10 years, 7 months ago

    hello and thank you for the reply. i am familiar with using the inspect element and followed your directions but it didnt work. i even tried a few variations such as adding !important and other structure elements.

    first entry

    #menu-item-1302 {
	color: #f8cc23;
}

    second variation

    #menu-item-1302 {
	color: #f8cc23 !important;
}

    and then finally a few like this

    #menu-item-1302 .main-navigation ul li a {
	color: #f8cc23 !important;
}

    just to verify i want to change the color of the menu item font and not the background of it. the font is currently a whitish color and i want the one menu font to be yellow

    thank you again!
    jamie

  3. Magus Staff 10 years, 7 months ago

    Hi Jamie

    Sorry for the delay in getting back to you. You were almost there. Please try the following

    #menu-item-1302 a {
    color: #f8cc23;
}

    Magus

  4. d-_-b 10 years, 7 months ago

    perfect! thank you so much!

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread