Archived topic
Submenu z-index & Merge Header Problem
7 replies · Started by Rick on June 8, 2022
I have done a merge for the header, and then gave the header a z-index of -10, so that I could have a sidebar on the home page slightly pop into the header. Unfortunately, there's a submenu that needs to be accessed that is showing up behind the sidebar. It's also looking a little transparent on the portion of it that is below the header. When you try to scroll down through the items in the submenu, as soon as it hits the border between header and body, the menu disappears: you cannot select items that appear below the header on the pop-up submenu.
I'd show you a screen capture (the site is in a staging area), but I apparently need to have it online somewhere to provide a URL here, and it's not online because (again) the site is in a staging area. (Bummer. On the GPBlocks site, I think you can directly add images.)
I tried setting a z-index on the submenu. Either I'm targeting the submenu incorrectly, or that isn't working. (Maybe because I am not using the right selector, but I don't know.)
Any advice would be most welcome.
Hi Rick,
I’d think the selector would be the issue as well but I can’t confirm for sure without seeing the site itself.
Can you try adding random CSS like background-color:#000; or something to test if you’re selecting the right element?
Kindly let us know how it goes.
I believe I have temporarily removed the password requirement. I have been completely unable to isolate the problem. I've put the staging URL into the Private Information section of this reply.
There are a couple problems I haven't been able to solve. Both have to do with menus. I haven't started a thread on the other one yet, because I didn't want to have too many threads going at once. The other has to do with centering the menu items within the off canvas area.
Anyway, I am totally lost on this now. The site is done, but for figuring out the menu problems.
IMPORTANT NOTE: THE PROBLEM ONLY OCCURS IF THE PRACTICE AREAS MENU IS ABOVE THE FRONT PAGE SIDEBAR. In other words, it doesn't happen if the screen size is such that the menu ends up to either side of the front page sidebar.
Hi Rick,
You have z-index set to 50 for this GB container, can you try to remove thez-index value?
https://www.screencast.com/t/Hf0QRUF09s
Well, major bummer.
That fixes the problem (took me a minute to remember where that was set), but it ruins a cool effect I had going on the front page.
I don't know how well you can see it here, but the yellow border on the left and the yellow box with the contact form push up just a bit into the header.
Is there no way to target the menu by itself to bring it above everything and keep this effect?
EDIT: NOT SURE WHY I CAN'T POST IMAGES HERE, BUT APPARENTLY I CAN'T.
Here's the solution to keep that effect and make the navigation works normally.
1. Disable the merge function in the header element for homepage.
2. Set the GB container's top margin to -50px instead of 240px:
https://www.screencast.com/t/1dxIVKMAt7
I would say I love you, but we all just met.
Nevertheless, Ms. Ying, that did solve the problem, and I thank you from the bottom of my heart! I'm still learning, so that site took me about 60 hours of work, and I was not looking forward to it not working the way I wanted.
Now I'm on to the next problem (centering the off canvas menu items in the canvas).
HAVE A GREAT DAY, EVENING, OR WHATEVER THERE IS HAPPENING WHERE YOU ARE!
Thanks Rick, I'm happy reading your reply :P
I think that effect is cool!
Raise a topic whenever you can't figure it out, we are always here to help!
