[Amy MParticipant]

Hi everyone, I’ve been reading through other tickets about buttons in the menu bar and I followed some instructions to use the “.x-btn .x-btn-small” CSS code in my custom menu item, and it works great…except, for some reason I CANNOT adjust the top padding in that button. The “padding-top: 0 !important;” code does nothing. Make it 20px and it just makes the height larger.

I also need to remove the “hover” and “active” underline for that button menu item and I’m not sure how to find the item # or the code to make that happen.

The page you can see the problem at is: http://twoleafcreative.com/?page_id=268

Here’s my CSS code in Customizer which has gotten me to this point:

/*
// Buttons
*/

.x-btn {
font-weight: 600;
border-width:2px !important;
padding-bottom: 0.3em !important;
}

/*
// Extras
*/

.x-navbar .x-btn {
padding-right: 17px;
padding-left: 0px;
padding-bottom: 20px !important;
padding-top: 0 !important;
margin-top: 20px;
margin-bottom: 20px;
}
.x-btn a:hover {
box-shadow: none !important;
}

I appreciate your help thank you!

Amy

[Rue NelModerator]

Hello There,

Thanks for writing in!

Your code will not work because there is a setting in the customizer that you can adjust the Navbar top link alignment. Inorder to resolve this issue and to be able to reduce the padding of your button, please use this code instead:

.x-navbar .x-nav-wrap .x-nav > li.x-btn > a {
    padding-top: 10px;
}

If you need anything else we can help you with, please let us know.

[Amy MParticipant]

Sweet, thanks!

[Amy MParticipant]

How do I take off the underline on the hover of that menu item?

[ZeshanMember]

Hi Amy,

Thanks for updating the thread!

Do you want to remove the blue underline that appears on menu item hover? If so, add following CSS under Custom > CSS in the Customizer:

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: none;
}

Thank you!

[troyreiberParticipant]

hi guys

I’m having similar issues here

https://www.agencyportalservices.com/new-homepage/

button has large top margin i can’t control

.navButton{
    vertical-align: middle;
    text-align: center;
    border: 2px solid black;
    background-color: white;
    color: black;
    margin-top: 15px;
    padding-top: 0px;
    height: 45px; 
    width: 250px;
    box-shadow: 0 5px 12px 0  rgba(0,0,0,0.2), 0 5px 14px 0 rgba(0,0,0,0.19);
}

.navButton:hover {
    background-color: white;
    color: red;
    text-decoration: none;
}

I tried a few tricks i’ve seen here with no luck. i’ve not had this problem before so assume it is linked to the actual main menu margin. If you could just tell me how to overwrite for my button

thanks

[LelyModerator]

Hi There,

Upon checking, the link is page not found:

To help you better, please point us to the exact page and section where the button is.

Always,
X

[troyreiberParticipant]

hey – attached is a screenshot instead. I had to turn CSS class for button off in menu as it applies to whole site.

looks like this

thanks so much for your help here

[DarshanaModerator]

Hi there,

You can the following CSS rule also, under Custom > CSS in the Customizer.

#menu-item-396 > a {
    padding-top: 10px;
}

Hope that helps.

[troyreiberParticipant]

thanks! perfect

[JadeModerator]

You’re welcome!

[Author]

Posts