[NueraParticipant]

Here is my site:
http://nueramarketing.com/

I’ve called out a specific menu item with a nice outline stroke using the following CSS:

#menu-item-32 span {
    border: 2px solid #F47D30;
    padding: 10px;
}

#menu-item-32 > a {
    padding-top: 25px;
}

It looks nice, but I’d like to give it a little more character, if possible. Specifically, I’d like to apply the following style points:

1) Rather than a box/stroke, I’d prefer a solid orange box (#F47D30), with white text
2) Upon hover, the text would remain white, but the background color would shift to #F7941E
3) If I could round the corners to match the rounded buttons in the Renew Stack, that would be amazing.
4) Once I apply the new button styling, I’d like to remove the underline. If that’s not possible I could always reverse the colors of the hover state I suppose.

Thank you so much, in advance!

[NueraParticipant]

So ironically, right after posting this I got the X Theme update that now includes Superfly Menu. Would this be an adequate solution for this task?

[Nabeel AModerator]

Hi there,

Thanks for writing in! You’ll still be needing some custom CSS to style the button as per your requirement with Uber Menu. Please replace your code with this:

#menu-item-32 span {
    padding: 10px;
    background: #F47D30;
    color: #fff;
    border-radius: 10px;
}
#menu-item-32 span:hover {
    background: #F7941E;
}
.x-navbar .desktop .x-nav > li#menu-item-32> a:hover > span {
    box-shadow: none !important;
}

Let us know how this goes!

[NueraParticipant]

Oh that’s stellar, thanks so much!

Just in case anyone else needs this, I went ahead and created one more line that deals with the vertical placement. My menu alignment had a sweet spot of 27px, but you could adjust that to your liking.

I also adjusted the corner (border) radius to mimic the rest of the buttons on my site.

#menu-item-32 span {
    padding: 10px;
    background: #F47D30;
    color: #fff;
    border-radius: 3px;

}
#menu-item-32 span:hover {
    background: #F7941E;
}
#menu-item-32 > a { 
    padding-top: 27px;}

[JadeModerator]

Glad it’s now all sorted.

Cheers!

[NueraParticipant]

Trying to add this same code to a new site, but no matter what I do it does not affect the menu item through the customizer.

I’m literally just adding this code to the Custom CSS section and applying the page id. Is there something I could be doing wrong?

[John EzraMember]

Hi there,

Thanks for updating the thread! You could check your other CSS if there is a syntax error somewhere, like missing closing brackets or single or double quotes that weren’t closed. A quick way to check is to put the CSS code you want to check at the very top above everything else. If it works then you know something below is preventing other CSS below it from working. If it doesn’t then there is some other conflict somewhere, that we’ll need to further check.

Let us know how that goes. Hope this helps – thanks!

[NueraParticipant]

This reply has been marked as private.

[JoaoModerator]

Hi There,

Upon comparing your website I am not sure what is the issue you are facing.

Would you mind to clarify?

Thanks

Joao

[NueraParticipant]

I have added code to the CSS section that should be highlighting my menu item as described earlier in the thread. However, none of my CSS additions are showing either in the Customizer preview, or in the live site.

I also saw a post on the Facebook forum about how apparently some folks are having an issue with CSS not displaying when an SSL certificate is installed.

[JadeModerator]

Hi there,

Are you trying to add the style to the Apply Now menu item? If so, the ID should be #menu-item-166 instead of #menu-item-164.

Hope this helps.

[NueraParticipant]

So 1) thank you so much for figuring that out.

But 2) how did you determine that the page is menu item 166? Everywhere I look it says it’s 164.

[RupokMember]

Hi there,

If you inspect element with developer tools then you can see the right ID/class – http://prntscr.com/c3m2ii

Cheers!

[NueraParticipant]

Huh… well there ya have it. Thank you again

[Prasant RaiModerator]

You are most welcome.

[Author]

Posts