Custom Menu Scrolling/Sizing Issues on Mobile Devices

Hello !

So I’ve created a custom Slide Menu that houses a dynamic list for categories.

Am facing several issues with sizing and scrolling and some image issues on main page.

  1. Image under the Blog Banner on Hero Section doesn’t display the image as expected but some garbled fonts - on different preview machines also.
    The slogan image is an .svg file - maybe replace it with jpeg/png ?

Slogan -

As seen on phones and other machines below -

  1. Menu as seen in Mobile Design view in designer -

Below is the actual view on phones - which is about right since I gave 10vh for individual items - So why is the designer showing extra real estate for phones - am I doing something wrong in designer settings ? OR does it use laptop screen VH for display while designing on laptop ?

As you see in the last image trying to select gear - results in browser footer sliding upwards.
So selecting last items or close to footer is an issue.

Also

  1. When the cursor is on the menu say below style or any other item and one scrolls - the main page behind menu - Hero section and so on - begins to scroll - I would like the page behind the menu to be inactive.

  2. Is it possible/trigger to close the menu - if the user clicks outside the nav menu ? IT seems to be the case in the Nav menu that comes in the designer - mine is custom made so not sure how to accomplish this.

  3. Scrolling menu items on iPhone is a pain - its very stiff and counterproductive.

Any guidance is appreciated


https://preview.webflow.com/preview/fashion-trend?preview=c828390464718b97492e13106a8c6d65

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