Streaming live at 10am (PST)

Center & Auto Width of Dynamic Item


#1

Hey guys,

I currently have a dropdown menu with six categories that are retrieved using a dynamic list. I want the categories and the dropdown bar to be centered with the same margin between every item, but I am struggling to achieve this.

The text is centered inside its Dynamic Item, but since some categories have names that are much longer than others, it creates a weird gap between some words and and an overall inconsistency.

Attached is a picture where you can see it. It is the most evident between Music/Experiential, and Fashion&Beauty/Post.

Thanks for all your help.


Here is my public share link: LINK


#2

It appears the problem appears when you set the dynamic Div to a fixed width. You have it set to 20%. I would rather only use padding to keep it the same. Hope this helps. :wink:


#3

@VLADinSACRAMENTO ahh... I thought I double-checked for all that stuff.... guess not :wink: Thank you for your help!

Now to my next issue: What's the move to get everything centered with only a 15px padding in between items? Now it's all spread out across the full width

Live Preview


#4

Let me see if I could recreate it quickly ... please give me a minute. thanks! :wink:


#5

What I see is 20px padding. Are you sure it is at 15px?


#6

I might change it to 15px or use 20px, depending on what looks better.

However, the issue is why it is so spread out? It moves with the width of the browser window. I want it to be set at 15px..

I have attached a picture to help clarify.

Thanks for your help man.


#7

I found the solution. Put the Nav Menu in a container. This should solve the problem. :wink:


#8

If not, feel free to ask more questions. The reason it does this is because the state of the Div is on Left Float. If this solves your problem please mark it as the solution. Thanks!


#9

Thank you for helping out. Putting it in a container definitely helped. However, there's still some weird width set to the Dynamic Item. The width item is blank on the dynamic item, so I'm not sure where this is coming from.

Ideally, I'd like the width of the dynamic item to be the exact width of the text in it, and THEN be able to adjust the padding.

I've attached a picture where I've set the padding of the link to 0, and as you can see there's still more width on the item.


#10

Yes, I also took note of that... there is something strange going on in the CSS. Will have to look into it tomorrow. Its time for me to go to sleep. Sorry I couldn't help you all the way. Hopefully I will find the solution tomorrow. :wink: Unless you find it before me. :wink:


#11

I unfortunately haven't found a way to figure it out yet. Let me know if you think of a solution!

Thank you for all your help so far.


#12

Yup, will look into it... :wink::grinning::blush::+1:


#13

Still looking into it, am not sure why we are getting this behavior. Webflow Forum, any ideas guys? ... I'm stumped. :wink::grinning::blush::+1:


#14

Hello again, guys (@carlsson and @VLADinSACRAMENTO)

You can "fix" this issue by changing dynamic list layout:

In this case, you will not need to put "Nav Menu" inside the container and set some width to it. Because all your nav-links set to display: inline-block and they will stay in one line. Then you can adjust padding on nav-links for move them closer or further.

P.S. Really curious what is your idea of navigation for mobile views :slightly_smiling:


#15

Wow @sabanna, coming through again :smile: Thank you so much. Works perfectly!

And as for the mobile navigation, I haven't really gotten there yet. I will probably do a vertical dropdown instead of the horizontal. Any other ideas? :wink:


#16

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.