Docs

[bperry420]

I have a custom nav link that I have styled to look like an orange button.
When I hover over it, you can still see the bottom border pop up.
How can I make that go away for just that link only?

The class I used for the link is nav-purchase-button

Stack: Renew
WordPress 4.5.2 running X – Child Theme
X Version: 4.4.2
Cornerstone Version 1.2.4

URL: http://dev2.petpace.com/

[bperry420]

Here is my CSS code for that link:

/* purchase button in navbar*/

.x-navbar li.nav-purchase-button > a
{
color:#ffffff!important;
background-color:#f8951d;
height:40px!important;
padding:15px 30px!important;
margin-top:22px!important;
margin-left:16px!important;
box-shadow: none!important;
text-align:center;
border-radius: 5px;
background: #f8951d;
}

.x-navbar li.nav-purchase-button > a:hover
{
color:#ffffff!important;
height:40px!important;
padding:15px 30px!important;
margin-top:22px!important;
margin-left:16px!important;
box-shadow: none!important;
text-align:center;
border-radius: 5px;
background: #ff6600;
border:none!important;
}

[Joao]

Hi There,

Please use the following code instead.

.x-navbar li.nav-purchase-button > a
{
color:#ffffff!important;
background-color:#f8951d;
height:40px!important;
padding:15px 30px!important;
margin-top:22px!important;
margin-left:16px!important;
box-shadow: none!important;
text-align:center;
border-radius: 5px;
background: #f8951d;
}

.x-navbar li.nav-purchase-button > a:hover
{
color:#ffffff!important;
height:40px!important;
padding:15px 30px!important;
margin-top:22px!important;
margin-left:16px!important;
box-shadow: none!important;
text-align:center;
border-radius: 5px;
background: #ff6600;
border:none!important;
}

Hope that helps,

Joao

[bperry420]

You did not even change anything. Your code is identical to mine. Please try again. Thanks

[bperry420]

UPDATE:

I changed the way I added the button.
In the menu, I have a custom link with this html: <button id=”nav-purchase-button”>PURCHASE</button>
It still has the purple bottom border popping up when you hover on it. How do I stop that?

Here is my new css code:

#nav-purchase-button
{
background-color:#f8951d;
color:#ffffff;
border-color:#f8951d;
border-radius:5px;
margin-top:-8%;
padding-left:30px;
padding-right:30px;
border:none!important;
}

#nav-purchase-button:hover
{
background-color:#4fc4cc;
color:#ffffff;
border-color:#4fc4cc;
border-radius:5px;
margin-top:-8%;
padding-left:30px;
padding-right:30px;
border:none!important;
}

[bperry420]

To clarify, I want to remove the line that pops up under the orange button that I added to my navbar.
see here: http://dev2.petpace.com/
I think that has something to do with li box shadow?

I know that to remove ALL of the lines from the whole menu, you would use the following code:

.x-navbar .desktop .x-nav > li > a:hover > span {
box-shadow: none;
}

I just want to remove it from my navbar button only.

Can you please help me do that?

Thanks

[Rad]

Hi there,

Sure, please add this CSS

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

Hope this helps.

[bperry420]

Thank you so much! That was the trick!

[Rue Nel]

You’re welcome!
We’re glad we were able to help you out.

[Author]

Posts