I’m seeking help with a mobile menu that has a gap between the burger and the drop-down and I can’t figure out what I’ve done. I’ve noticed there is an exclamation mark telling me to set the body element to position relative but I’m not sure why and if it has anything to do with the issue. I can’t make the body relative anyway. Something is not right with the positioning and I’ve tried deleting my styles etc but to no avail.
I would like the nav to sit up under the burger menu so the colour change when active is seamless. The issue can be seen on the ‘About Us’ page on mobile view.
you have 41px of margin on the brand div box which is pushing themenu bar lower.
If you compare the Nav bar on the home page to the others, the logo and burger are aligned differently. On the home page, they line up to the bottom of each logo, on the others they’re aligned to the centre. Make the other nav bar match the home one, it’ll fix it.
Thank you so much for that. I hadn’t even thought that it might be coming from the desktop version. Such a simple fix but really satisfying. Thank you!
First, regarding the exclamation mark indicating that the body element should be set to position relative, this is a common requirement for certain positioning scenarios in Webflow. To set the body element to position relative, follow these steps:
Open the Webflow Designer and select the body element in the Navigator panel (usually listed as “Body”).
In the Styles panel, locate the Position property and set it to “Relative.”
Now, let’s address the issue with the mobile menu and the gap between the burger icon and the drop-down menu. Here are some steps you can take:
Select the mobile menu element (usually a div or a nav element) in the Navigator panel.
In the Styles panel, check the position property of the mobile menu. Ensure it is set to “Relative” or “Absolute.”
Check the position properties of the burger icon and the drop-down menu within the mobile menu. They should also be set to “Relative” or “Absolute.”
Adjust the margins or padding of the elements involved (such as the burger icon and the drop-down menu) to eliminate the gap. Increase or decrease the values until you achieve the desired positioning.
If necessary, review any interactions or animations applied to the mobile menu or its components. Ensure they are not causing unintended spacing or positioning issues.
Something is not right with the positioning and I’ve tried deleting my styles etc but to no avail.