[thecashbagParticipant]

How can I add a button to the navbar?

Like this: http://wp-rocket.me/

[Paul RModerator]

Hi,

Thanks for writing in!

You can add the code below as link text for your menu.

<span class="x-btn x-btn-yellow x-btn-real x-btn-rounded x-btn-mini">Round Button</span>

http://screencast.com/t/5icKCDMhx3BY

Hope that helps.

[thecashbagParticipant]

Thanks that works 🙂

But how do I move it up so it’s inline with the links and cart?

See screenshot here: http://www.awesomescreenshot.com/image/982282/0279c15b7e51c6d6e5c22ee3f5d5944d

[John EzraMember]

Hi there,

Thanks for updating the thread! We need to look at your site so we can tailor some CSS for you. Would you mind providing us with your URL? (Please include any login info if needed via a Private Reply) Thanks!

[thecashbagParticipant]

https://elementpaints.com/

While I’m at it, can I please also get some help removing the shadow behind all of my buttons? And also the text shadow of the buttons? I have searched and tried to implement some solutions found in the forum but they do not work.

[thecashbagParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

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

.x-navbar .menu-item-78 .x-btn {
    box-shadow:none;
    text-shadow:none;
}

.x-navbar .menu-item-78 a {
        padding-top: 27px;
} 

Hope that helps.

[thecashbagParticipant]

Thanks 🙂

I got the alignment to work with some slight adjustment of your CSS (I just added !important; to the code) but the code to remove the button shadow does not work because although the shadow is gone it also removes the 3D effect of the button (the bottom part of the button is a different color). I need the shadow effect gone, but keep the 3D button style with the accent color under the button. Also it should apply to all buttons… not just buttons in the menu.

[RupokMember]

Hi there,

Thanks for updating. Kindly follow this to implement your own styles to the button – https://community.theme.co/kb/implementing-additional-button-colors/

You could get idea of styles from the button shortcodes examples : https://community.theme.co/kb/shortcode-walkthrough-button/

Hope this helps.

Cheers!

[thecashbagParticipant]

Thanks for the links but they don’t help with what I’m talking about.

I need to keep the 3D styling of the button (the accented color of the button). But remove the shadow. Your own buttons on this forum are able to achieve this. See here: http://www.awesomescreenshot.com/image/986178/ab3db776c0f085b5c43fc12c77cfdeef

Here you can see the difference on a screenshot of my site: http://www.awesomescreenshot.com/image/986200/eff50947506ab4482b6ab3b6cfffa6cf

[Paul RModerator]

Hi,

You can try this code instead.

.x-navbar .menu-item-78 a .x-btn.x-btn-real {
    box-shadow: 0 2px 0 0 #edaa74 !important;
}

Hope that helps

[thecashbagParticipant]

Perfect! Works a charm 🙂

One last thing sorry…. how do I remove the black underline while the mouse hovers on the button?

See here: http://www.awesomescreenshot.com/image/986547/53bb56ef8919d426dc8954da458d80f5

[RupokMember]

Hi there,

Thanks for updating. Add this code to remove the underline :

li.menu-item-78 > a:hover > span {
  box-shadow: none !important;
}

Hope this helps.

Cheers!

[thecashbagParticipant]

Perfect!

[Prasant RaiModerator]

You are most welcome. 🙂

[Author]

Posts