Content Area Dropdown — Center Dropdown

[bigdreams]

Hello, we are currently working on this page and unfortunately we are not able to center the dropdown area (like the picture above). Is there a simple method we missed?

http://b2d8v7hg.myraidbox.de/meine-beteiligungen/

Please help us!
Thanks

[ruenel]

Hey @bigdreams,

Thanks for writing in!

By default, the Content Area Dropdown content will be situate on the left going to the right. If you need to change it to the center, you will have to edit it, find the “Customize” tab and insert this inline element css:

$el .x-dropdown {
    left: 50%;
    margin-left: -75px !important;
}

• 

It is -75 because the width is 150 pixels.

[bigdreams]

Thank you first ! It works very well.
I changed it to 300px (and -150px) bc it was a little to small. Thank yoU!

Now if I can please you in another case — we have issues with the dropdown because its not on top level.

It is either under the next section or it is under the object (image) below. Can you somehow define that it is always at the top level.

thanks

[ruenel]

Hello @bigdreams,

Thanks for updating in! This issue is just because of the order of the elements displayed on top of each other. This can be resolved by assigning a greater z-index of the first row than the next one.

For example, the first row should have a z-index of 10 and the second row will just be 9.

• 

Hope this makes sense.

[bigdreams]

we did this — but we still have some problem zones — maybe you could check really quick.

and it doesn’t affect mobile — there we still have problems to

thank yoU!

[friech]

Hi @bigdreams,

Sorry, changing the z-index does not really completely solve the issue, because of the dropdown can overlap either on the preceding row or succeeding row. Like you can have one row to have a higher z-index so its dropdown will be on the top, but that row can also be overlap with the other row’s dropdown, so since that row has a higher index it will cover the other dropdown.

The only way I can see we can resolve this is to force the dropdown to only show on the under its toggle. You can add this to your Page > CSS (not Theme Options > CSS)

.x-dropdown {
	top: 100px !important;
}

Set all your row’s z-index to 1 so they all fall back inline automatically.

Thanks,