Z-Index on Page Element

Hi there!

I feel like I’m attempting something that should be fairly straight-forward here, but I can’t crack it for some reason. I’ve built the following page that includes a sticky inline navigation element:
https://shrimpshack.nueramarketing.com/menu/

Visually it works well, but the problem is that the site has another primary sticky navigation (that is required) and the bar that my primary nav elements live within lays over the on-page inline nav. This makes the inline sub navigation unclickable once the primary header appears on page scroll.

I’m attempting to bring just the inline nav element to the very top of the z-index stack (without bringing forward the column, row, or section), but so far I’ve not been able to isolate just that element. It should stay out of the way of the primary nav if it is just the element that is on top.

I’ve attempted to implement the following class elements, but neither seem to be affecting the inline nav element:

#stickymenubar {
    position:relative;
    z-index:999999999 !important;
}

and

.stickymenubar {
    position:relative;
    z-index:999999999 !important;
}

Please let me know what you think I should try here. Thanks!
~Grant

So… I seem to have inadvertantly fixed this (wish I knew what I did! LOL…)

Feel free to take a look to make sure I haven’t done something monumentally stupid though… I appreciate it.

Hi Nuera,

Thanks for sharing. I couldn’t check what was the issue at all but glad it’s working now. But yes, it should be z-index related and fixes.

Thanks!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.