[Resolved] Border around a single menu button

[Mustafa]

Hi,

I’d like to know how to create a thin white border around a single primary navigation button to make it stand out from the others.

Would someone be able to advise on how I can do that please?

GP Premium 1.2.96

[Leo]

Hi there,

Add the class menu-border to the Custom Classes field of the menu item(s) that you want to apply border:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Then add this CSS:

.menu-border {
    border: 2px solid #ffffff;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Can you provide a link to your site if this doesn’t work?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mustafa]

Thanks for the code Leo.

It worked great using the Simple CSS plugin.

Just one thing I noticed after adding this code is that the background area that is highlighted when hovering over the other menu options now appears 2 pixels shorter at the bottom in comparision to the menu item that I’ve added the border around.

Have a look here: http://prnt.sc/exe0jj

Is there a way to make the highlighted hover area of the other menu items 2 pixels longer at the bottom to match the highlighted area of the button with the border around?

I also noticed that if I put the menu in the footer area the white border around one of the menu items it appears around the item quite wide.

http://prnt.sc/exerkb

How can I change of the menu item border just in the footer area?

[Tom]

Try this CSS instead:

.main-navigation li a {
    border: 2px solid transparent;
}

.main-navigation li.menu-border a {
    border: 2px solid #ffffff;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mustafa]

Hi Tom,

Thanks for your reply.

The code you gave just makes the border around the single menu item slightly thicker but the highlighted area around the other menu items when I hover my mouse over them stay the same.

[Tom]

Can you link me to the site possibly?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mustafa]

Yes sure, here it is.

I am trying to get the border around the menu item at the top but it is showing up really wide in the footer widget and doesn’t turn white when I hover over it in the footer.

[Leo]

Could try something like this:

.inside-footer-widgets .menu-border.menu-item-733 {
    max-width: 27%;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom]

Did you remove the original CSS before adding my CSS?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mustafa]

Hi Tom,

Yes I did remove the other code before trying yours. I’m using your code now for you to see what it looks like.

Leo thanks. The border in the footer area is now narrower. Is there a way to add some space in between the menu text and the border around it in the footer area like it is in the primary menu area?

[Tom]

You still have this CSS which is throwing off the size:

.menu-border {
    border: 2px solid #ffffff;
}

Removing that should help a lot.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mustafa]

Hi Tom,

Thanks for pointing that out. It’s looking great now!

I entered your code into your Simple CSS plugin but I forgot I still had that code in the WP Customizer CSS section which I’ve now removed.

[Tom]

Awesome, glad I could help! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Roy]

Hi,
may this feature could be build in in the customizer in the next updates? I think it’s a nice idea…

[Leo]

Hi Roy,

Border add-on is on the the road map.

For now this article should also help: https://docs.generatepress.com/article/adding-buttons-navigation/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts