Hey guys, I have a test site that I’m working on, and I’m using a hero image on the home page, but it appears to be covering the menu.
I’ve researched the solutions here on the forums and tried a few custom CSS options based on those solutions:
.site-header {
z-index: 100000 !important;
}But I’m not great with CSS, so I might just be missing something here. Thank you for any help you can provide!
Hi Chris,
Please replace the previously added CSS with:
#site-navigation ul.sub-menu, .menu ul li ul.children { z-index: 1000; }Hi Alex,
Hmm….this didn’t seem to work. I added into the SiteOrigin CSS plugin, but there was no change. I also tried putting it in the Additional CSS box for the theme, which also didn’t work. Looking at the page source, it seems to be in the CSS, just having no effect.
Any other ideas?
I was able to find a workaround on another test site using another widget plugin, but I really like the options the SiteOrigin hero image offers!
Hi Chris,
Oh, I fixed a different issue – the sub menu was appearing underneath the hero widget. Sorry about that!
Please replace the previously provided CSS with:
.header-sticky .is-sticky #masthead { z-index: 1000 !important; }How does that look?