Header Pro Logo inline with Navigation Z-Index difficulties

[Sedu]

Hello,

with “Header Pro” I designed a header with a logo swap by scrolling down the page. That was a bit tricky but I’ve found a way that work for me. Now my menu looks great and the logo is on the right place but there is a big problem:

I have a Logo with a word mark and figurative mark. If the page is scrolling down the word mark switches to figurative mark. For this I’ve created two bars, one for every logo. A third bar contains the menu and the social icons. All Elements are in one line.

The Logo Images containing the url to the home page. But the logos aren’t clickable, because the menu bar is on top of the logo. Ok, I’m clever and switch the order of the bar… now the logo leads me to the homepage but the menu isn’t clickable. I’tried to shorten the logo bars with css width, margin etc. but I can’t find a solution to make both work. I’ve also tried to change the z-index but the result is the same if I switch the order of my bar.

It would be very great, if you can give me a hint what I have to do in my case to get clickable logos and a functional menu.

[ruenel]

Hello @Sedu,

Thanks for writing in! What you are trying to do is not possible. You cannot adjust the z-index of any of the bars without having to compromise the other bar. What you can do is to add two more containers to the Navigation bar to have a 3 column bar.

And then in the middle container, insert a button element. Add a link to your homepage same as the link in your image, disable the text setup, and then make the button background color transparent so that it will become an invisible hit area on top of your logo.

Hope this makes sense.