The top navigation button can not be hovered when scrolling down

Community resources General
1

Hello everyone,

This might be a simple fix but I need some tips.

I want the navigation top bar (includes the yellow circle home button and Info button) is behind the text but the buttons are still clickable. After scrolling down, the button is on top of the project list so it won’t block the home button.

And I have the second question about the mobile, I don’t know why the “Info” button doesn’t appear on the mobile.

Screen Shot 2022-08-12 at 4.01.16 PM
Screen Shot 2022-08-12 at 4.01.16 PM3498×1704 385 KB

Image from iOS
Image from iOS1170×2532 171 KB

And here is the link to the staging site:
https://preview.webflow.com/preview/hazels-radical-project-be2fe3?utm_medium=preview_link&utm_source=designer&utm_content=hazels-radical-project-be2fe3&preview=3afa5d734b6e0999b806d4fffef93d88&workflow=preview

Thank you!

2

So regarding the first part. If the button is behind any element it won’t be clickable. I would recommend taking down the opacity for the text to still be readable.

As per the second piece. “Info” is inside of nav menu 4. Move the menu icon slider to hide the menu icon (shown below)

image
image1891×573 62 KB

1 Like
3

Thanks for your reply Sunbear. After I moved the menu icon slide to the one you circled, I’m not able to click the yellow home button now. Do you know why?

4

Well, you are able to. Just not when other elements are on top of it. My design recommendation would be to set the opacity of Image 90 to 75% and the Nav bar to a relative position of 999.

This brings the nav bar to the front of all other elements.

image