How do I put a Contact button in the header?

[trigrowth]

I have a “contact” link in the header (x theme Renew stack) and I want it to appear like a button (like the ‘23’ design cloud: https://demo.theme.co/designcloud/headers/23-2/)

My question is identical to this other thread (How Do I Put a Button in Header?) but the global css code (below) didn’t work for me – not sure why.

---

.x-navbar .desktop .x-nav > .menu-item-514 > a:hover,
.x-navbar .desktop .x-nav > .menu-item-514 > a,
.x-navbar .desktop .x-nav > .menu-item-514.current-menu-item > a {
box-shadow: none;
height: 40px;
margin-top: 25px;
padding-top: 15px;
color: #fff;
border: none;
background-color: red;
margin-bottom: 0.25em;
text-shadow: none;
box-shadow: none;
border-radius: 0.25em;
}

[trigrowth]

I’ve solved my own problem: turns out I need to give the menu item a class (https://www.wpbeginner.com/wp-themes/how-to-style-wordpress-navigation-menus/)

and the replace ‘.menu-item-514’ with my new given class name (ie, ‘.contact’)

the spacing around the button is still not quite right, but it’ll do for now.

[ruenel]

Hello Tarun,

Thanks for writing in! We are glad you’ve figured out a way to resolve your issue.
We really appreciate your effort to let us know. To get you spacing around the button, please do add “padding-right: 15px !important;”, therefore the final code can be like this:

.x-navbar .desktop .x-nav > .menu-item-514 > a:hover,
.x-navbar .desktop .x-nav > .menu-item-514 > a,
.x-navbar .desktop .x-nav > .menu-item-514.current-menu-item > a {
    box-shadow: none;
    height: 40px;
    margin-top: 25px;
    padding-top: 15px;
    padding-right: 15px !important;
    color: #fff;
    border: none;
    background-color: red;
    margin-bottom: 0.25em;
    text-shadow: none;
    box-shadow: none;
    border-radius: 0.25em;
}

Feel free to make adjustment as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Intro to CSS - https://goo.gl/mFuWQT
How to get CSS selectors - https://goo.gl/BmoH39
Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
CSS Media Queries - https://goo.gl/L3ZHNg