Archived topic
Primary Nav Border
9 replies · Started by gedosan on May 12, 2020
Hi guys
I'm trying to get a border (above and below the horizontal nav) on the primary nav bar - you can see it in URL1 (using elementor) but I want to replicate the same look in the out the box GP menu if possible (see URL2).
Is it also possible to have hover over top and bottom lines for each link in the nav too (like in URL1)?
Thanks!
Hi there,
I'm not seeing any URLs at all.
Can you confirm?
Ah, it wouldn't let me add the URLs as I had. I've added them one after the other now, URL1 then URL2. Cheers
- Try this:
.inside-navigation {
border-style: dotted;
border-width: 1px 0 1px 0;
border-color: #8e8e8e;
}
- That's a little more difficult with the small animation.
But if you go to the example site, right click on the menu item and you can see the CSS they are using.
The ::before and ::after is what you need to replicate.
GP's selector would be .main-navigation .main-nav ul li a:before and .main-navigation .main-nav ul li a:after
Cool. I've added it to URL2, it's a bit big though (height-wise) - how can I make it less high?
Have you tried reducing the menu item height?
https://docs.generatepress.com/article/menu-item-height-width/#height
Screenshot removed :)
Thanks Leo, all done.
No problem :)
To add here another question - if I would like to have a small border around every menu item, how would this work ?
thxs Martin
Hi there,
can you raise a new topic where you can share a link to your site - we can then provide the specific CSS for your site.
