Home>Support>Customize single menu item.

Customize single menu item.

Hi everybody,

I just need to customize a single menu item via CSS, but it does not work. I created a custom class for a new item but calling this class in the css child-theme style it doesnt do nothing.

How can I do that?

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 9 months ago Max G. Khappa

    Anybody?

  2. 7 years, 9 months ago Max G. Khappa

    I just created a new “Class” for a single menu item I want to customize and make it different from the others, but in my child theme css doesn’t do nothing.

    I can also edit the code but please, any suggestions?

  3. 7 years, 9 months ago Alex S
    Hi, I Work Here

    Hi Max,

    Please note that, on average, staff we’re unable to reply for 4 – 6 days. I know that sounds like a lot but due to volume we have to offer, we’re not able to get to all threads quickly. With that said, you can jump the queue if you have SiteOrigin Premium so if faster support is desired, consider upgrading.

    Do you have a public URL where we can take a look at what’s going on? Chances are something else is overriding your CSS due to specificity – basically, another selector is more specific than your CSS and is being used as a result.

  4. 7 years, 9 months ago Max G. Khappa

    Hi Alex, thanks for your reply. Ok I thought to upgrade my Theme already. I have few thing that I wanna buy yet but even the Theme is one of the item I was thinking for.

    This is the link to my webplatform: http://www.khappa.com/

    What I need to do is just customize a single menu item and make it like a button, I can do that just using CSS code.
    For example: how can I customize the “Sign Up” item?

    Thanks again guys

  5. 7 years, 9 months ago Alex S
    Hi, I Work Here

    Hi Max,

    Yeah, you’ll need to use CSS to do that, yeah. Something like this (for example), will adjust that menu item:

    .main-navigation ul li.menu-item-14894 {	border: 2px solid #ff500b;	transition: all 0.4s ease;	transition-property: all;	transition-duration: 0.4s;	transition-timing-function: ease;	transition-delay: initial;}.main-navigation ul li.menu-item-14894:hover {	border-color: #fff;}/* Menu Item text */.main-navigation ul li.menu-item-14894 a {}/* Menu Item text on hover */.main-navigation ul li.menu-item-14894:hover a {}

    The above CSS uses specific selectors to allow you to change things without having to worry too much about specificity. I didn’t adjust the colors but I’ve provided you with the selectors to do that also. Let me know how you go mate. :)

    You might also need to install the SiteOrigin CSS Editor.

  6. 7 years, 8 months ago Max G. Khappa

    Ah ok… just using his custom name/number!
    It could be better to use another way because if im gonna change menu items it will change their number, anyway, its easy to do and its working!

    Now I just have to adjust some css code in my vantage-child.
    So, it’s working properly Alex! :)
    Thanks again

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