[Resolved] Customizing Menu Button

[Anil]

Hi,

I have added a button on my menu, but I am unable to resize it. It appears too large on the desktop and covers the entire width in the slideout menu on mobile. I tried using Custom CSS to edit the properties but wasn’t able to get the desired result. How do I fix the button?

Thanks,

Anil

[Leo]

Hi there,

Try using the same method of selector here: https://docs.generatepress.com/article/adding-buttons-navigation/

And add this style:
line-height: 20px;

[Anil]

I tried adding the line height, but it isn’t working. Not sure what I am doing wrong here. Can you help?

Regards,

Anil

[Tom]

Give this a shot:

.main-navigation .main-nav ul li.quote-button a {
    line-height: 35px;
}

[Anil]

Nope, that didn’t work either

[Leo]

Looks working to me: https://s18.postimg.org/r1xk49zc9/2018-01-02_2143.png

[Anil]

Hey yeah. Guess I forgot to do a hard refresh of my page. Thanks a lot Leo & Tom

[Leo]

No problem!

[Nele]

Hi there,

I’ve placed a button in my main menu. (website http://www.dshomecosult.be)

but I have 4 questions:

1: My logo (left) and my menu(right) aren’t on the same “height”, I’ve tried and change the height trough customization –> lay out –> menu –> main menu –> menu height BUT my button gets all big when I do this.

code i used to make a button in my navigation:

@media (min-width:769px) {
    .main-navigation .main-nav ul li.nav-button a {

-webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  font-family: Montserrat;
  color: #ffffff;
  font-size: 15px;
  background: #cf203b;
  padding: 0px 5px 5px 5px;
  text-decoration: none;

I’ve tried and change the header height, header padding and logo padding but I can’t get a solution where my button has a normal size AND my logo and menu are on te same size.

2: I want the size between my menu items to be equal. I’ve found where to change the space inbetween them but with my button there always seems there is less space between the item next to the button and the button itself. Is there anyway to fix this?

3: it seems my word ‘contact’ is a bit off center (horizontally) in the button.
To fix this I tried a code but it only changed my button size again…

4: I want to give it a hover effect…to start with I just wanted to change the colour of the button and i have found this code:

.butn:hover {
  background: #fffff;
  text-decoration: none;
}

But it doesn’t work and i also would like the color of the text to change…

Could you guys please help me out? What am I doing wrong?

kind regards
Nele

[Leo]

Please open a new topic for your questions.

Thanks!

[aziz]

Hi Team ,

I have used the code, but nothing happened, did I miss something ?
I also added the class : nav-button

@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #ffffff;
border: 2px solid #000000;
color: #000000;
line-height: 35px; /*this number will likely need to be adjusted*/
}
}

Thanks very much
Aziz

[Leo]

Can you link us to the site in question?

[Author]

Posts