[Resolved] Boxing a phone number

[John]

I like the way the Peak theme boxes the phone number as a menu item. I found the css in the theme :

.main-navigation:not(.toggled) ul li.menu-button a {
	border-width: 1px;
	border-style: solid;
	line-height: 40px;
}

This appears to put the border around it, yet when I try it on my own site I don’t see this class to target and hence the code doesn’t work for me. Can you help me figure out what class to target to get the same effect? Thank you!

[David]

The simplest method is to give the menu item a custom class using these instructions:

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

And then style it like so:

.main-navigation .my-custom-class a {
    border: 1px solid;
    /* other CSS for your button */
}

[John]

Thanks! Another secret (to me) hidden in those screen options.

[Leo]

This article might also help: https://docs.generatepress.com/article/adding-buttons-navigation/

[Author]

Posts