Streaming live at 10am (PST)

Z-index problems - again :)


#1

Hello,
I slowly learn Webflow crafting my own navigation bar and now I’ve stucked. I made integration - when you click the menu button the menu bar slides from above, and when you click again it hides. Simple, right?

It works fine, the problem is I want my menu bar slide BEHIND my Navigation bar which holds logo of my brand and menu button. Using Z-index I made it partially - my menu bar slides behind and not cover a navigation bar (which is good), but my menu links (for example “home” is still IN FRONT of navigation bar - and I don’t understand why at all :frowning:

What I want to achieve is for example on all of these wonderful examples: https://webflow.com/website/Custom-Hamburger-Menus

When u click hamburger, menu slides down, but when it slides up, it hides behind nav bar. I want same effect. For now, my menu slides in front of my logo covering it.

I will be greatful for some help. Here is link to project:

https://preview.webflow.com/preview/deymos87s-spectacular-project-navbar?preview=72bbdadb1942a1c2b6f08b80595903e1


#2

Your brand div is transparent so no matter the z-index everything will appear as going through it. Give the brand div a background colour matching that of your site background and it will work.


#3

Thank you for answer dram. Ok, but how it works here:

https://webflow.com/website/Custom-Hamburger-Menus 2

There is a transparency effect here, too I think?

Or maybe I will ask different question. Is there a way to achieve that kind navigation effect like here:

I mean transparent at top, white when scrolling down, and with mobile menu like mine?


#4

As a matter of fact if you will use the default webflow navbar then it will already do what you want.

Yes, sure. Use page interactions for “page scrolled” to achieve the hide and show effect.

The nav has to be changed to have a different background and other properties when at the top which can be done by either setting interactions to change a few properties of the nav itself or simply create two navs which will switch places in different parts of the site.


#5

Thank you very much - I had to remove default navbar because I didn’t know how to make it horizontal instead of vertical, but I managed myself different.

I’ve worked on interaction details, especially on order of animations and timing of hide/show - so now when my nav slides down it show itself in the meantime and hides same way - when it slides up. So it never cover logo and menu button.