Archived topic
Help with some CSS for NAV Menu Height
5 replies · Started by Stacey on June 17, 2020
Hi
If I view the site on smaller screen size - 2 of the menu items wrap over 2 lines.
Can you please help me with some CSS to get the background colour of the other menu items to expand to be the same height so that it is even.
When I change the Menu height in the customiser it is also increasing the ones that are wrapping and looks worse.
This is what it looks on a larger screen https://www.dropbox.com/s/vqe479ph3k28kyi/w4p-menu1.png?dl=0
And with the issue happening here https://www.dropbox.com/s/7elrm6lygpp4ysv/w4p-menu2.png?dl=0
Thanks for any guidance or suggestions.
Hi there,
This CSS you've added is causing the issue:
.nav-aligned-right .main-navigation .menu>li, .nav-aligned-center .main-navigation .menu>li {
margin: 0 3px;
width: 15%;
}Using the width property is usually not good for responsive purpose.
Thanks Leo - I've removed that now and adjusted the width. Is there any way to control the items dropping down onto a second line when the screen zoom level changes
this is what it is doing now
https://www.dropbox.com/s/qmbw4nmztozyvtn/w4p-menu3.png?dl=0
Try increasing the breakpoint by a little bit:
https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width
Thank you - I've found a solution to get it all sorted. Appreciate your help
No problem :)
