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.
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.
@VLADinSACRAMENTO ahh… I thought I double-checked for all that stuff… guess not 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
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!
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.
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. Unless you find it before me.
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
Wow @sabanna, coming through again 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?
Thank you so much. Works perfectly!