- This topic has 11 replies, 3 voices, and was last updated 4 years, 7 months ago by Leo.
-
AuthorPosts
-
August 14, 2017 at 7:12 pm #366004Brian
Hello,
I was wondering if there was a way to add divider bars between secondary navigation menu items. This allows me to do it with the primary navigation:
.main-navigation .menu > li > a {
border-right: 2px solid #000000;
}.main-navigation .menu > li:last-child > a {
border-right: 0;
}Thank you!
August 14, 2017 at 7:26 pm #366019LeoStaffCustomer SupportHi Brian,
Try this:
.secondary-navigation .secondary-menu > li > a { border-right: 2px solid #000000; } .secondary-navigation .secondary-menu > li:last-child > a { border-right: 0; }
August 14, 2017 at 8:06 pm #366031BrianThanks for the quick response!
Forgot to mention that’s the first thing I tried, and no dividers showed up. Just tried again and still no luck.
August 14, 2017 at 8:12 pm #366033LeoStaffCustomer SupportAhh sorry. Adjusted the code above.
August 15, 2017 at 5:45 am #366293BrianThanks, that worked!
Followup questions:
1) Can the height be customized on these bars (borders)?
2) Can I specify which menu items I would like to have a border? (For example, I am using the float right CSS class for a few menu items, and do not want those to have borders)I appreciate all the help.
August 15, 2017 at 10:14 am #366518LeoStaffCustomer Support1) This is a little more complicated. I’m searching for a similar request before.
2) You would add custom CSS class to the menu item you want the border, like
nav-border
:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classesThen change the CSS to this:
.secondary-navigation .secondary-menu > li.nav-border > a { border-right: 2px solid #000000; }
August 15, 2017 at 7:25 pm #366885BrianThank you the custom classes worked great!
August 15, 2017 at 9:34 pm #366930LeoStaffCustomer SupportOk I don’t think we can use border if you want to control the height. Try this instead:
@media (min-width: 769px) { .main-navigation .main-nav > ul > li:not(:last-child) { position: relative; } .main-navigation .main-nav > ul > li:not(:last-child) > a:after { content: " \007C"; display: block; position: absolute; right: 0; top: 0; font-size: 10px; } }
You should be able to control the size by changing the font-size property.
August 16, 2017 at 6:46 am #367213BrianThat did it! Except the top portion wasn’t needed, just for future reference.
You guys have the best support of any WordPress related theme or plugin I’ve come across by the way, not even close.
August 16, 2017 at 7:42 am #367281LeoStaffCustomer SupportAwesome. Thanks for reporting back!
Glad we’ve been helpful ๐
August 25, 2019 at 4:44 pm #993346JeremyHello,
I’m hoping to make this solution work. However, I am not sure what the final implementation is?
have created a footer menu, and I would like a vertical bar to separate items and then to style the bar height, etc.
Can you give me the summation of these steps?
Thank you in advance.
Best,
Jeremy
August 25, 2019 at 5:55 pm #993372LeoStaffCustomer SupportAny chance you can open a new topic and link us to the page in questions?
Thanks ๐
-
AuthorPosts
- You must be logged in to reply to this topic.