Can't hide navigation from mobile site and overlapping issue

Site: www.wevillage.com

Problem: the main navigation will not “hide” on the mobile version so that I can effectively use the hamburger menu. This is seen when the phone is in the vertical position when clicking on the about us section, it intersects with the resources drop down menu.

If I use the regular navigation then the link overlaps other menu options making them unclickable. I tried to make the drop down not transparent thinking this would be my fix. Instead the layering is off and the other drop down menus come to the front.

Please help.

Hi @Jessica_Scott, Can you please update your post with some more information so we can help you faster? Things like your read-only link, screenshots, and your environment info really speed things up.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category - General - Forum | Webflow

Thanks in advance! :slight_smile:

Hi @Jessica_Scott, Thanks for the screenshot! also, the read-only link instructions can be found here: Share a read-only link | Webflow University

Also, please take a peek at the posting guidelines: Posting Guidelines for the Design Help Category - General - Forum | Webflow

Thanks!

Here is the read only link:

https://preview.webflow.com/preview/wevillage?preview=f342d668a327189900f4e513e0b5564d

Are you still looking into this?

Hi @Jessica_Scott,

Thanks for your patience. I did take a look at the site, and the first thing I noticed, is that you do not actually seem to have a navbar in your navigation symbol, thus no hamburger menu either.

The hamburger menu only works with the navbar widget. Currently the navigation is using rows and columns dropdown widgets only (that I could see)

By default, the dropdown that opens, overlays the content below it. This causes the open menu text to be displayed above the other dropdown menu texts.

I would recommend on mobile portrait, to put each dropdown on it’s own line by setting the Dropdown to display block, and then give each dropdown list a class.

Set the dropdown list class to relative

What you would end up with, is something like this (quick example, I did not change any other styles to make it pretty with ease transitions or anything…)

http://quick.as/0wlWcrOB7

Setting the dropdown list to position relative, will cause the menu to open, and push the other content which follows it, down, instead of overlaying the content.

This is one approach if you are going to use dropdown widgets in mobile views, stacked on top of each other like that, or grouped together closely.

​I hope this helps, cheers dave

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.