Hamburger menu and dropdown menu overlay

Design help General
1

Hi

I have a problem which is my hamburger menu and dropdown menu overlay on mobile mode.

40
40650×1372 99.3 KB

I tried to set the hamburger menu as z-index 9999, and the dropdown menu as z-index -1.
They don’t overlay again, however, I can’t press my dropdown menu.

Does anyone know how to fix the problem??:joy:

The other question is I made my navbar scroll into view with the black background effect by adding some interaction. I set my navbar as absolutely, and with a sticky div outside of it to make the scroll into view interaction.

34
342988×1626 734 KB
39
392978×1662 759 KB

However, my hamburger menu doesn’t scroll well. When scrolling, it doesn’t really move, but the page moves.
Does anyone can help with this problem?

Here is my site Read-Only: LINK

(how to share your site Read-Only link)

2

Hi,
It looks like you got the menu working? Is that right?

3

Hi,

It’s so happy to see your message again.
This is a different problem of my menu.
Two of them are now solve yet.:joy:

https://preview.webflow.com/preview/bodyboss-new?utm_medium=preview_link&utm_source=designer&utm_content=bodyboss-new&preview=e92f248af4ca057386d36b76b710db5f&pageId=5d7888026945b03f18cf569d&itemId=5d7888026945b07d71cf561f&mode=preview

4

Ok, so now you need help with the full length sidebar menu, is that right?

5

Yes!
It can’t scroll to the bottom. And the dropdown menu overlaps on it.:joy:

6

Hi,

Is there any answer can help me?:joy:

7

Sorry, I’ve just been busy… Sure thing… let me look at the link again and while I’m doing that. I have a similar menu on my portfolio still working on, but on this page is a sidebar. See if this is the same: Gary Michael Design | Pricing

I’m going to your link now… okay the only thing is I can’t actually tell what’s going on because they’re all symbols. Read only links don’t let you unlink them.

Since you’re using a Navbar component I believe, the best test would be to:

  1. Recreate from scratch using Divs - on a completely new blank page
  2. Recreate using a Navbar component - on a completely new blank page

Then add images, etc to see where the problem is. I can’t add new pages in read only mode. On my portfolio, I didn’t use the Navbar, just plain Sections and Divs.

8

Hi,

Thanks for your reply!!:joy:
I just copied a new page and unlink form symbol.

Please kindly help me with the hamburger menu doesn’t scroll on sticky nav bar
(Hamburger menu doesn't scroll on sticky nav bar)

PNG
PNG750×1334 91.5 KB

Also the navbar overlay with the dropdown menu.:joy:

Please kindly check my preview mode.
https://preview.webflow.com/preview/bodyboss-new?utm_medium=preview_link&utm_source=designer&utm_content=bodyboss-new&preview=e92f248af4ca057386d36b76b710db5f&pageId=5da90eb01e9c2c2ff086f66d&mode=preview

Best regards,

9

Okay, I’m there now… let’s take a look… which page is it exactly?

10

Yeah I’m looking at all the pages and this type of menu, if I had to recommend, should be done from scratch. It would be faster. Oftentimes, the native components in the Designer are hard-coded with elements that are not visible in the application.

This is one of those cases. You’ll spend too much time trying to manipulate a native component, It’s just faster to build it :slight_smile:

If you need help building it let me know.

11

Hi, Thanks for your reply.

The ideal navbar is like the Peloton.

It would be great if you could kindly help me to build the navbar.
How to make it?

Best regards,

12

Okay it’s pretty straight forward, here’s a quick video… only a few steps to do it. Then you can use the “Top Section” to put all other items in you want. The “Sidebar Menu” can be separate and now they won’t clash.

https://www.screencast.com/t/I5c3xEJv4pcR

See ya later :slight_smile:

14

Hi!

Thanks for your movie! I finally made the menu! :slight_smile:

I also made a “close side menu div” to close my side menu.
Is it a good way to do that?

01
012544×714 300 KB

I made a “feature nav group” to group the navbar, side menu, and close side menu div.
However, the “close side menu div” works on every page except the pages which have sub navbar.
Could you kindly help with this problem? or is there any better way to do this?

https://preview.webflow.com/preview/bodyboss-new?utm_medium=preview_link&utm_source=designer&utm_content=bodyboss-new&preview=e92f248af4ca057386d36b76b710db5f&pageId=5d7888026945b029e3cf5698&mode=preview

Best regards,

15

Sure, I’ll look now… give me a minute… haha

  1. Which page’s have a sub nav bar?

  2. No, you can’t use the “Nav Bar Component”, if you watch my video I’m using Divs. The nav bar won’t work for this because the page will still scroll.

  3. When you use Divs, you can control the content independently. It’s not a very good “User Experience” when the page scrolls underneath a menu. If you could watch the video again to see how I structured the layout.

16

Thanks for your reply!

  1. These following pages have the sub navbar.
    https://www.bodybossportablegym.jp/bodyboss-feature
    https://www.bodybossportablegym.jp/how-to-use
    https://www.bodybossportablegym.jp/weight
    https://www.bodybossportablegym.jp/review

You can check the preview mode here.
https://preview.webflow.com/preview/bodyboss-new?utm_medium=preview_link&utm_source=designer&utm_content=bodyboss-new&preview=e92f248af4ca057386d36b76b710db5f&pageId=5d7888026945b029e3cf5698&mode=preview

  1. Does the “Nav Bar Component” means the “feature nav group” I made? I was thinking to make a group in order to symbolize it and put the nav bar on every page. How would you recommend?

  2. I follow your video to make the blue part. :slight_smile: Thank you again.
    I tried to make the group for copying the menu, and div for closing the sidebar. Could you kindly advice any better way to make it?

    32
    322732×650 361 KB

17

Hey,

Yes, you can use any of the components on the inside, but you can’t use the “Nav Bar” because it’s a native component which does have some hard code in the element. I’ve never had success using the “Nav Bar” for this type of interaction. It’s best to create it from scratch.

If you want I can create it for you, if you don’t mind giving me your login. I’ve done this for a number of members. Easier that way.

I can make it a symbol and you can simply drag it to any of the pages. It’ll be faster that way :slight_smile:

18

Hi,

Thanks for your reply! It’s a little bit hard to give you my account due to some client privacy.
It would be great if you could kindly make a video to teach me how to make it, so next time I can finally make it by myself. I really appreciate your help!

Best regards,

19

Okay, I’ll try to do it today, but the video I did before shows the steps. Just follow it exactly and you can do it. Play and pause through each step.

20

Thanks you very much!
The previous video was great! I follow it without any problem!

Just need to know the further step of

  1. how to close side menu.
    2.the good way to symbolize the navbar to copy to different page.

Best regards,

21

Awesome! So you put an “X”, the word close, or a button with close inside the main parent Div. But do everything first, then at the end, click on the outer most Div Wrapper and go to the Symbol panel under the “+” assets sign. You’ll need to create the symbol name and save it.

Then on all other pages simply click to add it. If it’s all correct, it should fall into the same place.

  1. Oh, don’t forget to set all the page name links and their link location. Save it as a symbol after that.
  2. Make sure close X is highest in the z-index. But this menu should be the highest z-index on your pages. I usually use 11. Any other items I won’t take above 10.

Let me know if you need additional help :slight_smile: