Docs

[Misho]

Hi Guys!

I have some custom setup going on in the header, so it prevents me to get the right z-index for the topbar language switcher.

This is the setup:

1. Site logo extends above the topbar and below the navbar.

2. Language switcher (dropdown list) is in the topbar, floated to the right.

Problem: switcher dropdown opens below the navbar, instead of over it. This is because the topbar has z-index: 1 and .x-navbar-inner has z-index of -1.

If I remove the z-index from the topbar, switcher will extend properly over the navbar, BUT, then I cannot extend the site logo above the topbar, no matter what z-index I give to it.

I need both wpml language switcher in the tobar to go above the navigation menu, together with the site logo (x-brand img), which needs to go above the topbar too.

(note that there is also an element added to .x-navbar:after which needs to stay at the same z-index level as the navbar).

Hope you can help me on this. 🙂

Thank you!

PS: the CSS is in the Customizer, all on the top in the /* — Header — */ section.

[Misho]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for writing in.

The z-index only works with relative elements and limited to its parent element. Hence, your top bar is covered by navbar, where makes everything within the top bar covered too.

How about this, remove the z-index from your topbar, and add this CSS.

.x-topbar {
    background-color: #2B1C15;
    width: 60%;
    float: right;
}
.x-navbar-wrap {
    clear: both;
}
.masthead {
    background-color: #2B1C15;
}

Hope this helps.

[Misho]

Thinking outside of the box. literally. 🙂

It works perfectly now!

Thanks!

[Paul R]

You’re welcome! 🙂

[Author]

Posts