Z-index placement of a nav dropdown - CSS best practice question

Wappler General Need Help
1

I have a page with a sticky top heading designed and working to overlays a main layout.

The issue I’m having is the dropdown menu displays behind the sticky-top when the page is first opened

image
image843×437 22.1 KB

Worked through this example but the outcome put the the whole content page behind the main page.

Open to any ideas or other methods to get this displayed.

2

It will be hard to answer this question, without actually seeing your page. Can you please provide a link to it?

3
Summary

While you’re there maybe you could suggest a different best practice for the logo transition. Currently it’s set to hide at scolltoY position 5. and the small logo fades in at position 10.

You’ll see the galleries drop down here.

https://jdev.keywestexclusive.us/archived-boat-gallery

If you get an ECONNRESET - refreshing the page a couple times will update the SEO database. I’m still working locally so it’s a bit confused. I’m using Brian’s SEO method.

1 Like
4

Can you take a minute and review this? I’d appreciate your insight

5

Well you have 2 headers - one with the menu and one with the inputs and both of them have the same z-index. Add a higher z-index to the header containing your menu and the menu items will appear over the one below.

6

Thank you - I was looking for the inputs to roll up over the main menu header. I tried attaching the z-index just attach to the dropdown list but this doesn’t seem to respond to that setting.

Your suggestion did work, so I am again missing some CSS rule.

7

Sorry but this sounds a bit weird - you want the inputs to be over the header, but at the same time the header (i.e. its dropdowns) to be over the inputs? :slight_smile:

8

Scenario - use clicks on one of the galleries. Page reloads. User wants to look at the other gallery goes back to menu and then clicks on “Galleries” dropdown but now the items are hidden behind the inputs header.

And I hear your brain - this guy isn’t making sense :slight_smile:

Here’s the code it that provides any insight.

                                <div class="nav-item dropdown" dmx-style:z-index="2000">
                                    <a class="nav-link dropdown-toggle text-light" data-bs-toggle="dropdown" href="#" id="dropdown1" role="button" aria-haspopup="true" aria-expanded="false" dmx-style:z-index="2000">Galleries</a>
                                    <div class="dropdown-menu bkgrd_dropdown dropup" aria-labelledby="Gallery Dropdown" dmx-style:z-index.important="3000" dmx-style:position.important="'absolute'">
                                        <a class="dropdown-item text-white" href="/sold-boat-gallery" dmx-style:z-index.important="3001" dmx-style:position.important="'absolute'">Sold</a>
                                        <a class="dropdown-item text-white" href="/archived-boat-gallery" dmx-style:z-index.important="3001" dmx-style:position.important="'absolute'">Archived</a>
                                    </div>
                                </div>
                            </div>
9

First this part is not correct, also setting a z-index to the dropdown only won’t make any difference if its parent is lower z-index.
You can’t have the header with the nav lower z-index than the inputs header and at the same time to have the navbar items higher z-index …
If you need to have the menu items appear over the inputs, then you need your whole top header to have a higher z-index.
For example add an id to it: id="header-top", then in your css add:

#header-top {
z-index: 1021;
}
10

Thank you for the confirmation to what I’ve seen.