Header Pro: Center dropdown and dynamic width

[rok1975]

Hi,

i have a Problem with the dropdown in Pro Header Builder.

I would like to center the dropdown area under the toplink. I found some solutions in the forum but the problem is (see screenshot) that the width of the dropdown is always the same. It would be great if there is no text wrapping and the dropdown changes the width to the longest possible sublink.

Here is the link to the homepage: wasserturm.pxielkoenige.de

Best regards
Tobi

[tristup]

Hi Tobi,
Thanks for reaching out.

The given URL is not accessible from multiple locations. There might be some restrictions on IPs to access the website, please remove the IP restriction and let us know to examine it.
Please remember that we are from different parts of the World and most of us have a dynamic IP so we can’t provide a specific IP address to you.

Thanks

[rok1975]

Hey tristup,

sorry, that was my fault. Wrong Url!
wasserturm.pixelkoenige.de.

Best regards
Tobi

[tristup]

Hi Tobi,

You can control the width of the dropdown menu from your Header & Footer builder, please got the Bar > Container > Navigation Inline > Dropdown tab and change the value for the Width.
Please find the screenshot below:

You can learn more about the dropdown settings from here: https://theme.co/docs/navigation-inline#dropdown-settings

Hope it helps.
Thanks

[rok1975]

Hey,

The width is set to auto but “Über uns” -> “Strategie & Sicherheit” is wrapping and the dropdown is not perfect centered.

Thanks.

[tristup]

Hi @rok1975,

Can you please share your site URL and credentials in the secure note to examine the problem further. The following details we required:

– WordPress Site URL & Admin URL
– WordPress Admin username / password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[rok1975]

Hi tristup,

i added a secure note!

Thanks

[tristup]

Hi @rok1975,

The given credentials are not working, can you recheck and send it again.

Thanks

[rok1975]

Sorry tristup,

here the working credentials!

[christian]

Hey Tobi,

What you need couldn’t be done using the options because though centering the dropdown would look nice, if the menu with dropdown is the last menu item, it would be cut-off that’s why the element does not support such a layout.

Because there’s no option for this, custom CSS would be required. I’ll give you an example but please note that we cannot provide samples all the time as custom coding or development is outside the scope of our theme support.

You will need to learn CSS on your own and also learn how to use the browser’s element inspector so you could see the CSS selectors you’re going to use.

The following sample code should do the job when added in the Navigation Inline element’s Element CSS.

$el #menu-item-15 .x-dropdown {
    width: 220px;
}
$el .x-dropdown {
    left: 50% !important;
    transform: translateX(-50%);
}

If you’re interested to learn the parts of the code, we can answer that in One.

Hope that helps and thank you for understanding.

[rok1975]

@christian

$el #menu-item-15 .x-dropdown {
    width: 220px;
}
$el .x-dropdown {
    left: 50% !important;
    transform: translateX(-50%);
}

Thanks for your help. I totally understand it. I thought i missed something in the Pro Header Builder.

Best regards
Tobias

[christian]

You’re welcome, Tobi.