Search dropdown centered

[mcvanz]

Hi there,
can you help me with a small customization?

My search dropdown on mobile view goes out of the screen (see screenshot); i’d like to have it centered and just below the bar. Any idea?

Thanks in advance, guys!

[prakash_s]

Hello @mcvanz,

Thanks for writing to us,

By seeing the screenshot, it looks like it might be an issue of positioning and padding or custom CSS code.

Please go through with the tutorial for padding and postioning.
In order to use CSS, you need to know how to use browser’s element inspector. Please check this tutorial so that you can learn more about how to use browser’s element inspector https://www.lifewire.com/get-inspect-element-tool-for-browser-756549

If it does not help, please let us know the specific page URL to examine.

Please note that customization outside the scope of our support.

Thank you for understanding.

[mcvanz]

Hi there,
i’ve no used any custom code for that result, this is a default configuration. I’m looking for a parameter to use with dropdown to center that content but i’ve no idea how to solve it! Suggestion?

[nabeel]

Hey @mcvanz,

This is happening because of the width given to the search downdown. To fix this, inspect your Search Dropdown element in Header Builder then navigate to Dropdown tab (see screenshot)

Under Setup adjust/reduce the Width as you need. Let us know this goes!

[mcvanz]

Seems better with 300px maximum but what is the rule to align “center” this dropdown?

[nabeel]

Hey @mcvanz,

This would require customization as this is not a theme feature by default and is outside of our support scope, but we will do our best to help you getting started with the customization but we will not be able to implement it.

Inspect your Search Dropdown element and in Element CSS, paste the following code:

$el .x-dropdown {
    left: 50%;
    transform: translateX(-50%);
}

This might not work as intended but this will point you in a right direction so you can experiment with the values. To learn more about centering items using CSS, please see https://css-tricks.com/centering-css-complete-guide/

Please note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps!

[mcvanz]

@nabeel

$el

Thanks a lot!

[prakash_s]

Hi @mcvanz,

Glad that we are able to help you.

Thanks