Streaming live at 10am (PST)

Dropdown not taking up full width of text... how?

On this dropdown nav, is there a way to make the nav link text WIDTH be as wide as the text on ONE LINE? It does this on the mobile menu when the dropdown is open but not on desktop?

Read link below.


Here is my site Read-Only: https://preview.webflow.com/preview/tesco?utm_source=tesco&preview=2d2927ff573c18873f21bb3eb8e73a65
(how to share your site Read-Only link)

You could apply a specific width to the class.

CloudApp

Thanks. I should have prefaced that I was aware of that option.

I was more looking for an auto width…

IE if you just place a text link in the body of a container, the width is set automatically based on the length of text…

for some reason in the dropdowns it doesn’t.

In this case the .w-dropdown parent is setting the width and the child is at 100%. In your example the text (inline block in a link) would wrap at 940px.

The text is set to display:block though not inline…

The only inline block is the drop down itself… and that’s set by default from webflow.

?

The child nav list is not going to be wider than its parent. In this case the parent element is establishing its width based on the contents (the text , size , padding etc…)

In a menu each element is set to inline block so you can add many right?

This screenshot might help you. I placed the element in a container and set it to block (it is now inheriting all the space of the container. You can see that the drop down nav menu children container is now only as wide as its content and padding.

CloudApp

Thank you, I understand this.

Yet, I don’t want the parent to be display block, as it’s the nav dropdown text… when you do that, as you can see in your example, it (dropdown main tab text) takes up the full width of the nav bar…

There must be a way to have:

I think you would have to build a custom menu not using the drop down element. Then you could use flex.