-
New challenge for me..
I’ve got a horrible nav menu which requires splitting some of the nav items using <br> in the wp menu settings, but others just single words.
It sort of works, with all text vertically centred, but when I try to introduce a background colour for the nav items, the colour only fills the double line items, but leaves the single items with an uncoloured gap top and bottom.
How can I align all the nav text to the bottom?
And how can I make each tab the same height / colour scheme??Thanks in advance!
-
Hi there,
Can I see the issue on your site?
-
Site link posted
-
Can you try this CSS?
@media(min-width: 769px) { .main-navigation .main-nav > ul >li[class*="current-menu-"], .main-navigation .main-nav > ul >li:hover { background-color: #5315ff; } .main-navigation .main-nav > ul { align-items: unset; } .main-navigation .main-nav > ul >li { display: flex; align-items: flex-end; } .main-navigation ul ul { top: 100%; } }Adding CSS: https://docs.generatepress.com/article/adding-css/
-
That’s fantastic Ying – thank you!
Pushing my luck.. is there an option to align all the nav items so the single word tabs text line up vertically with the 2nd word of the split line tabs?? Instead of vertically centred? Does that make sense? Almost like vertical align tab text to the bottom or baseline of each tab?? -
Yes, I’ve updated the CSS 🙂
-
Thanks again Ying 🥰
Will check that out tomorrow
Cheers -
You are welcome 🙂
-
Absolutely perfect !
Never tried that before: “align-items: flex-end; ”
THANKS 😉 -
You are welcome 🙂
- You must be logged in to reply to this topic.