Menu Item as Button Styling Help

Support
#1

Please see the header navigation at http://www.jaimemintun.com

I nearly have this the way I want it, but can’t figure out how to shrink the padding above and below the menu item so the pink “button” doesn’t look so thick.

I want the top and bottom of the button to be the same as the sides.

Here’s my code:
@media (min-width: 980px) {
#menu-item-3393 a {padding-top: 0px;}
#menu-item-3393 a span {
background-color: #f39bb1;
color: #ffffff !important;
border: none;
padding: 1px 3px;
border-radius: 2px;
margin-top: 10px;
margin-bottom: 10px;
box-shadow: none !important;
}
#menu-item-3393:hover a span {
background-color: #d25272;
}
}

Thanks!

#2

Hi There,

Thank you for writing in, please update your custom CSS to this:


@media (min-width: 980px) { 
		#menu-item-3393 a span.x-anchor-text-primary {
			background-color: #f39bb1;
			color: #ffffff !important;
			padding: 10px 10px;
			border-radius: 2px;
		}
		#menu-item-3393 a span.x-anchor-text-primary:hover {
			background-color: #d25272;
		}
}

Adjust the padding if you want to adjust the size of the button.

Hope it helps,
Cheers!

#3

Perfect, thank you!

#4

Glad we were able to help :slight_smile:

#5

You guys are always truly amazing. Been using X theme for years for every website! Another quick question - how do I remove the top line hover accent ONLY above the button? Regardless what page they’re on. Thanks!!

#6

Hi There,

Please also add this custom CSS:

#menu-item-3393 a .x-particle {
    display: none !important;
}

Let us know how it goes!

#7

Awesome. Thanks!!

#8

You’re always welcome!

Cheers.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.