- This topic has 14 replies, 4 voices, and was last updated 6 years, 7 months ago by Leo.
-
AuthorPosts
-
April 16, 2017 at 11:56 am #306589Mustafa
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?
April 16, 2017 at 2:42 pm #306622LeoStaffCustomer SupportHi 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-classesThen 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?
April 17, 2017 at 3:41 am #306752MustafaThanks 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.
How can I change of the menu item border just in the footer area?
April 17, 2017 at 9:03 am #306865TomLead DeveloperLead DeveloperTry this CSS instead:
.main-navigation li a { border: 2px solid transparent; } .main-navigation li.menu-border a { border: 2px solid #ffffff; }
April 17, 2017 at 11:12 am #306923MustafaHi 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.
April 17, 2017 at 7:26 pm #307076TomLead DeveloperLead DeveloperCan you link me to the site possibly?
April 17, 2017 at 11:53 pm #307124MustafaYes 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.
April 18, 2017 at 9:15 am #307349LeoStaffCustomer SupportCould try something like this:
.inside-footer-widgets .menu-border.menu-item-733 { max-width: 27%; }
April 18, 2017 at 9:22 am #307351TomLead DeveloperLead DeveloperDid you remove the original CSS before adding my CSS?
April 19, 2017 at 12:24 pm #307850MustafaHi 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?
April 19, 2017 at 9:16 pm #308016TomLead DeveloperLead DeveloperYou still have this CSS which is throwing off the size:
.menu-border { border: 2px solid #ffffff; }
Removing that should help a lot.
April 20, 2017 at 9:59 am #308210MustafaHi 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.
April 20, 2017 at 10:14 am #308219TomLead DeveloperLead DeveloperAwesome, glad I could help! 🙂
August 18, 2017 at 7:47 am #368713RoyHi,
may this feature could be build in in the customizer in the next updates? I think it’s a nice idea…August 18, 2017 at 9:20 am #368761LeoStaffCustomer SupportHi 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/
-
AuthorPosts
- You must be logged in to reply to this topic.