Navigation dropdown (for mobile view) hiding page links

My header has a drop down mobile view, see below.

This works fine, when page is small I can toggle and see the links. However, even though the grey link section is hidden on page view, it is causing a problem. Any text links which would exist in it’s space when viewed on wide page are no longer clickable. It is as though the Navigations grey link section is not collapsing correctly and getting out of the way of my normal page view.

You can see that the top link is prevented from working but the bottom one works (both are identical links)

Hey @darren.james7518 :wave:

I know that can be frustrating. Let me see if I can help while my computer is doing an update.

Try using the inspect tool. When you click on the top link, what is overtop of it? Is it the header overlapping and being pushed down because of the menu icon?

It could be many different things. If you want to share a link to the preview and give view access, that would help. Then I can do the inspect tool, or maybe the debugger, and see what is going on.

Hope to get this figured out for you. :blush:

Thank you! The inspect tool and debugger tool are pretty near useless as they just don’t show anything when hovering over those elements (as though they don’t exist).

Yeah, when you try clicking on it, it shows the header coming up. It’s definitely the height of your header like I thought. Check it out:

As a side note…

Reusable elements like headers never seem to collapse height when hidden. It still shows the original height of the element. Not sure if this is a bug that needs to be reported, or if this is intended by Bubble. You can try using a group focus instead making the header extra long. Maybe that will help.

Hope that helps! :blush:


For All Your No-Code Education Needs:

  • One-on-One Tutoring
  • eLearning Hub
  • Video Tutorials

But I need the header to be that large or how do I add in my links for mobile view? See my mobile view header below.

Also, note that this DID work fine yesterday and it did collapse.

Maybe try this :arrow_up: That might help a bit. It gets tricky even with a group focus since they aren’t very width responsive.

1 Like

But I have changed nothing since yesterday, all was fine. That is why I think I have got a bug from somewhere maybe? I will strip everything back and try and solve this - will update you guys if I find the reason for the problem.

I’m not sure what it was like the other day. :man_shrugging: So it’s hard for me to tell. When using the inspector, it was definitely clicking on the Header though. It looks like it works again? Maybe because you resized the header height?

Double check that it still works when opening and closing the header menu again to be sure. It might not hide again after the first use.

I just deleted the mobile links so now the normal page view text links work (they are not covered up by large header) … but now I don’t have a mobile view drop down. I will start from scratch and see.

In the tutorial for creating the mobile drop down links, the toggle pushed the page elements down, whereas mine drops over the top (overlaps). Not sure why as I followed the tutorial exactly.

Oh, what tutorial did you watch for it? Maybe I can see what was different. Maybe just resizing the header would do it.

You can try keeping the header how you had it and just changing the height. Sometimes that works.

Thank you for your offer. However, I think I am getting there - I remade the drop down and changed the animation style for the drop down to “fade in”. It only has one link but it works and the wide page links are working too. I have no idea what went wrong because I have just redone what was already done!

1 Like

Nice. :+1: Glad it’s starting to work again.

1 Like