Archived topic
Boxing a phone number
3 replies · Started by John on May 8, 2018
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!
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 */
}Thanks! Another secret (to me) hidden in those screen options.
This article might also help: https://docs.generatepress.com/article/adding-buttons-navigation/
