Unable to vertically center navigation menu item button

Support
#1

I am trying to have one of my menu items on the navigation bar be a button. I have searched the forums and have tried everything that has been suggested. However I am still unable to make the text vertically centered without having the button positioned all the way at the top of the screen.

Here is the CSS I am currently using.

.x-menu-item-contact-button {
height: 40px;
margin-top: 15px;
border-radius: 0;
background-color: #a74482;
border: none;
}

My website is MarkeeWeddings.com

#2

Hello Adam,

Thanks for writing in!

Please add following CSS under X > Theme Options > CSS:

.x-menu-item-contact-button a {
    padding-top: 10px !important;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#3

Hi Adam,

Are you referring to the button with pinkish color? If yes, then please change this custom CSS

.x-navbar .desktop .x-nav > li > a {
    height: 75px;
    padding-top: 25px;
}

to this

.x-navbar .desktop .x-nav > li > a {
   line-height: 40px;
}

Line height should equal to the overall height of the button for it to center vertically. You don’t need to add height :slight_smile:

Thanks!

#4

Thank you I got the text centered. What I would like to do is to bring the top of the button (background) down so there is a space between the top and the button.

#5

Hey Adam,

This would require custom CSS as this is not a theme feature by default and is outside of our support scope, but we will do our best to help you getting started with the customization but we will not be able to implement it.

First find and replace this part of your custom CSS:

.x-menu-item-contact-button a {
    padding-top: 20px !important;
    background-color: #A74482;
}

With this:

.x-menu-item-contact-button a {
    padding-top: 10px !important;
    background-color: #A74482;
}

Then add the following code in the Theme Options > CSS:

.x-navbar .desktop .x-nav>li.x-menu-item-contact-button>a>span {
    padding: 10px;
}
.x-menu-item-contact-button {
    margin-top: 15px;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#6

That did the trick… Thank you so very much it was driving me crazy all day!

#7

We are delighted to assist you with this.

Cheers!

#8

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