Home>Support>adjusting color of single menu item

adjusting color of single menu item

By d-_-b, 10 years ago. Last reply by d-_-b, 10 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

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. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 15 days ago Magus
    Hi, I Work Here

    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. 10 years, 15 days ago d-_-b

    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. 10 years, 12 days ago Magus
    Hi, I Work Here

    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. 10 years, 11 days ago d-_-b

    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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More