Content dropdown box over top of header in xpro

[fxground]

Hello,

1. I have this content dropdown box that displays under my header. Is there a way to change it so it will display above/over top?

2. Probably a real simple question but is there a way to center this button? I’ve seemed to try everything and can’t imagine i have to do it by css …

Thanks!

[rad]

Hi there,

Thanks for writing in.

Would you mind providing your site’s URL first? I’m not sure what content drop down it has, is it custom?

About the alignment, it depends if it’s displayed inline or block, let me check it first.

Thanks!

[fxground]

Sure i’ll put the site (username and password) in the secure box

[nabeel]

Hi there,

Thanks for the credentials! It was the bar z-index issue, I went ahead and fixed it for you. Please clear your browser’s cache and reload the site.

Cheers!

[fxground]

Thanks worked perfectly! Do you know where i would change the z-index issue for content drop down boxes (just for the future?)

And do you know how I would center this button? (secure note)

[christopher]

Hi there,

You can find the Z-Index option in different parts of the elements. In this specific case the Bar z-index changed not the Content drop-down:

For the button, I clicked on the Customize tab of the Content Dropdown element and used the Element CSS feature to add the code below:

$el {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

For more information about the FLEX display mode and the code I used to center the button please read this article.

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

Thank you.