- This topic has 7 replies, 3 voices, and was last updated 3 years ago by
David.
-
AuthorPosts
-
January 16, 2020 at 11:52 am #1134406
Andy
Hi,
I’m trying to recreate a menu similar to https://www.army.mod.uk/. The menu is full-width and each menu item is equal width and scales down responsively.
I’ve tried using flexbox to distribute the menu items evenly which works but there are other issues I’m not able to overcome:@media (min-width: 1000px) { .main-navigation ul { display: flex; justify-content: flex-end; } }
Because the Generatepress Customizer settings use line-height to set the height of the menu, if one menu item contains a lot more text than the rest, it wraps on to a 2nd line causing it to be much taller than the rest of the menu. If I try to set the height to 0 in the customizer and then set the menu height with CSS then the text is not vertically central.
I’ve included the development URL in the field below.
Any help much appreciated.
January 16, 2020 at 6:01 pm #1134594Tom
Lead DeveloperLead DeveloperHi there,
Played with this, and this is the best I could come up with:
.main-navigation .main-nav ul li a { line-height: inherit; padding-top: 15px; padding-bottom: 15px; } .main-navigation .main-nav ul li { display: flex; align-items: center; } .main-navigation .main-nav ul li[class*="current-menu-"], .main-navigation .main-nav ul li:hover, .main-navigation .main-nav ul li:focus, .main-navigation .main-nav ul li.sfHover { background-color: #3d93d0; }
It means adding the background color to the
li
element, but it should do the trick.Let me know 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJanuary 17, 2020 at 5:30 am #1134959Andy
Thanks Tom, it’s working quite well except the menu item with 2 lines breaks it. Also, it’s not quite filling the full-width of the header.
January 17, 2020 at 6:18 am #1135003David
StaffCustomer SupportHi there,
try this CSS instead:
@media (min-width: 1000px) { .main-navigation ul { display: flex; } .main-navigation ul li { flex: 1; min-height: 100px; position: relative; } .main-navigation .main-nav ul > li > a { display: flex; height: 100%; justify-content: center; align-items: center; line-height: 1 !important; text-align: center; box-sizing: border-box; border-right: 1px solid #022b39; } }
You may want to adjust the menu item spacing to stop the nav from jumping to a new row on smaller desktop screens.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 17, 2020 at 7:41 am #1135229Andy
Awesome! – thanks David it works great. Unfortunately the design requires the borders not to be full-height so I had to change background colours/hovers back to the li.
However, by doing this only the a tag/text is clickable and not the whole menu item which isn’t ideal.
January 17, 2020 at 7:49 am #1135247David
StaffCustomer SupportYou could add the borders using a pseudo :before element like so:
.main-navigation ul li:before { content: ''; position: absolute; left: 0; right: 0; height: 40px; top: 15px; border-right: 1px solid #000; pointer-events: none; }
then you can remove the
li
top and bottom padding, adjust its height etc. You will need to tweak the height and top properties in the above as well.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 17, 2020 at 8:09 am #1135286Andy
Perfect, thank you!
January 18, 2020 at 1:53 am #1135785David
StaffCustomer SupportGlad we could be of help
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.