Hiding Button behind Navigation Bar dropdown menu

ti3xl

Hey 🙂

I couldn't find a ticket for this issue so I hope I'm not repeating a question.
The right-most item of my navigation bar has sub menu/ dropdown menu. I would like to be able to hide the button behind that dropdown menu, currently it hovers awkwardly in front of it obstructing access to the sub menu items.

Thank you very much!

Jasper

Hey again,

Thanks for your question again! No problem 🙂

Do you perhaps have an example? Then I'll be able to take a look for you.

If it's another element on your site (not Buttonizer), then you can try giving your group a custom class and then change the z-index of the Buttonizer group.

For example, you can give the group the classname buttonizer-lower-index and then add the following code to your website:

.buttonizer-lower-index {
  z-index: 99;
}

In this case, elements that have a higher z-index will fall over the element. You can tweak the value until the other elements floats above it.

Let me know if this helps 🙂

ti3xl

This is what it looks like.
Where would I add this code? I presume somewhere in the "divi>theme customizer>additional css" menu?

Jasper

Thanks for your reply and the screenshot! You indeed can add the CSS code to the additional CSS-menu in the theme customizer 🙂

After tweaking the value a little, it should be underneath the dropdown when hovering.

Let me know if this helps 🙂

ti3xl

Do I also need to create a buttonizer group first? The additional css-menu doesn't seem to recognize ".buttonizer-lower-index".
Sorry for all these probably basic questions, I'm very new to this ^^

Jasper

ti3xl No problem at all!

You already have a group, but only a single button is added (I've checked your settings and you need to click the 'Desktop Button' group).

Then you'll find the Style tab on the right, scrolling down you'll find Custom Class where you can enter buttonizer-lower-index 🙂

After publishing, it can take a minute before it's updated on your site. Let me know if this helps!