Unclickable Menu Items with Transparent Overlay

[fideliscreative]

hello!

i built a pro header that you can see here. It is made up of two overlapping bars. One bar is sticky with a menu and a shrunk logo. The other sitts on top of it and is transparent with a larger logo. This bar is not sticky, thus when the user scrolls, the logo basically shrinks.

The issue that I’m having is that before the user scrolls, the transparent bar is laying over the menu items and they are unclickable until you scroll. How can I go about making the top bar so that it does not make my menu items unclickable.

Thanks in advance!

[friech]

Hi Josh,

Thank you for writing in, that is happening because you lowered the z-index of your second bar (navigation bar) than the first bar (logo bar). So that means the logo bar is on top of the navigation bar, hence you can not hover the navigation bar anymore because it was covered by the logo bar.

What you can do is restructure your bars, make sure the navigation bar has a higher z-index.

Or

Try adding this to the logo bar’s Element CSS area

$el.x-bar {
	 width: auto;
    left: calc(50vw - 156.5px);
}

Hope it helps,
Cheers!

[fideliscreative]

Thank you for the code snippet! I was looking for a way to shrink the width of that top bar and it worked perfectly.

Cheers!

[friech]

We are delighted to assist you with this.

Cheers!