Archived topic
Split menu space issue
1 reply · Started by Sol on October 21, 2021
Hi there!
We followed the steps to set up a split menu, but there seems to be a space after the second menu item, and the "competition schedule" and the menu text is overlayed over the logo.
Website link: http://sols1.sg-host.com/
Thanks in advance for your help!
Best,
Sol
Hi there,
Ideally you want menu items evenly split across either side of the logo. You effectively have to balance the length of the menu item text either side.
So the best solution would be to move Restaurant to the left of the logo.
To do this you can change this line of CSS:
.main-navigation ul li:nth-child(3) {
margin-left: auto;
}to:
.main-navigation ul li:nth-child(4) {
margin-left: auto;
}To stop the menu from overlapping the logo, the simplest fix is to increase the Mobile Menu Breakpoint in Customizer > Layout > Primary Navigation so it breaks to the mobile view at larger screen size.
