Solved Divi Fullscreen Dropdown Menu

Hi,

I'm currently running into some challenges on this site: zerotolaunch.nl

I'm using the divi menu module in the header and I would like it to be a hamburger icon on both desktop and mobile. When you click on the hamburger icon, a fullscreen dropdown menu should appear. So far so good...

The issue I currently have is when you land on the site, you already see the dropdown menu instead of the actually page. This issue is probably caused because I'm trying to center the menu text in the middle of the page regardless of device. I'm not too happy with the positioning of the menu text either, because it centers the first menu item in the middle, which looks kind of weird on a longer mobile screen.

How can I fix this? The position of the menu text should be responsive to screen length and the menu should only be visual after someone clicks the hamburger icon.

Thanks in advance,

Jorg

 

Hi,

Thanks for the reply!

I tried some things after my initial posted question here, which explains the difference between what I described and what you see on the screenshot. I've used your code snippet to create a fullscreen dropdown menu. Thanks for that

Only issue I'm still running into is moving the menu items down a little bit. I have now added some top padding to the code you provided, although it causes the effect I want it somehow also interferes with the dropdown menu animation. It doesn't run as smoothly as it does without the top padding. Is there a workaround for this as well?

Thanks

 

Awesome! This fixed everything.... Thanks for the help