Horizontal Dropdown menu hides behind header

Ooops.  I had to remove the code.

It made the button on the header not clickable.

Is there another way to do this?

G

The url is

thegloriousrevival.org

The last menu item (Other) has 3 items in the drop down so you should be able to reproduce the error.  The Button on the header must not to be affected, however by the fix, as it was with the previous code.

I do have extensive css for this site.  For some screen sizes I dropped the .section-title-wrapper to get it out of the way.

The problem exist for many computer sizes using the brave browser (oddly, even though the same screen resolution displays fine in other browsers).

But I am also able to duplicate it now in developer tools, responsive design mode in firefox

for the size 1024×600 for example.

And also for 1400 x 900,

(I obviously didn’t change that one) so you will see you cannot get to the final 2 drop downs because the section-title-wrapper is in the way.  Took me a while to figure this out.

Hope you can help, because my client is very likely to add more in the drop downs and then even my lowered .section-title-wrappers will not be effective for a bunch more laptop screen sizes.

Thanks

It’s not the color that is the issue.   I tried the code and it doesn’t make any difference.

The menu actually hides behind the header wrapper so that when you scroll over it it is inaccessible.  It disappears from view completely.

I know it’s the content wrapper because if I force it down and out of the way  ie….

.content-align-right .custom-header-content-wrapper {
padding: 0;
margin-top: 100px;
}

this solves the problem (temporarily) …. but I can’t drop them down any further to accommodate more items to the drop down, so this is not be a fix at all in the long term.

You can see on the image attached  (

that it is behind, but what you can’t see is that when you scroll over it then it disappears and is not clickable because it’s all behind the header wrapper.  This is worse on the brave browser, but is also an issue with any media sizes for which I have not pushed down the wrapper, WHICH, as I said, is not an adequate fix.

I cannot use the

.absolute-header .site-header { z-index: 999; }

because, although it works to solve this, it makes it so the button on the header is then not available to click, which is a very important element here.

Not sure what 999 is.  Can it be shorter?  so that the menu appears properly in front, but the button is not affected?

Yes!!!  Thank you so much because I was really concerned I had hit a major road block.

Amazing support which I have very much appreciated over the years.