Docs

[Craig Allan Teich | FormulaWP]

I’m attempting to style one navigation item to resemble a button. I’ve cobbled together the information from a few past forum posts and I’ve almost gotten the desired effect. But now I’ve exhausted my limited CSS powers and need a bit of guidance from the experts.

The site is https://FormulaWP.com

The custom CSS I have currently for this item is:

/* NAVIGATION - ADD BUTTON STYLING TO GET STARTED MENU ITEM */
.x-navbar .x-nav li.x-btn.menu-item {margin:15px 0px 0px 15px; padding: 19px 20px 18px 20px; height:58px; color: white; background-color: #008aad; border-color: #008aad;}
.x-navbar .x-nav li.x-btn.menu-item a {color: white; box-shadow: none; padding:0;margin:0;}
.x-navbar .x-nav li.x-btn.menu-item:hover {margin:15px 0px 0px 15px; padding: 19px 20px 18px 20px; height:58px; color: white; background-color: #00ad08; border-color: #00ad08;}
.x-navbar .x-nav li.x-btn.menu-item a:hover {color: white; box-shadow:none; border:none;}

The only thing I’m trying to do that I’ve been unsuccessful with is removing the line that shows up below “Get Started” upon hover. Can you please suggest a bit of code that will accomplish that, please?

THANKS!

[Prasant Rai]

Hello Craig,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

li#menu-item-480 a:hover span {
    box-shadow: none !important;
}

Let us know how it goes.

Thanks.

[Craig Allan Teich | FormulaWP]

PERFECTION!

Thanks! You guys rock as usual.

[Joao]

🙂 Thanks for the kind words.

Joao

[Author]

Posts