Roll-Button vs Dropdown menu

I have a problem with the z-index of 2 items, working against each other:
The Roll-Button (call to action-button) on my header-slider is inactive, due to my top menu option bar showing above my header-slider.

If I put the header slider above, the call to action button works, however the options will then be displayed below the header-slider, on a mobile device, and won’t be readable.

Website: thebridalbox.co.za

Hi,

The CTA button not clickable I think because of your custom CSS code:

.header-slider {
    z-index: -1;
}

Please remove it to enable the CTA button.

Can you explain this more detail?

Regards,
Awan

Yes that’s correct.

If I add that code, I can’t click the button.

If I remove that code, the menu appears below the header slider on a mobile phone.
Then the user cant click on the menu options.

Hi,

Please try to remove this code:

.header-slider {
    z-index: -1;
}

Then use this code instead:

@media only screen and (max-width: 1024px){}
	header#masthead.site-header.fixed {
		position: relative !important;
	}
}

You’re epic! Thanks Awan.
Worked like a boss!

1 Like