Streaming live at 10am (PST)

Dropdown component


#1

I am trying to add a dropdown component to my existing navbar however when I drag in the dropdown component it takes up the entire width of the container thus distorting the spacing of the navmenu, this is even after changing its class name to reflect the links already in the navmenu. Any help would be greatly appreciated!


#2

Could you provide a read-only-link and a link to the site so we can take a look?

https://help.webflow.com/article/how-do-i-share-my-sites-read-only-link


#3

https://preview.webflow.com/preview/cottontale-website?preview=27712a9a9bc1e397f9935f7f230511d6


#4

Hi @catw,

It looks like you have your link/brand outside your nav container so it's over the pink area of the photo. You have a few options...here are a couple.

Give the link block a class and make the position absolute. Or you could place it back in your nav to keep it balanced with the menu icon width on the page.

I notice when click on the menu button that you have some changes happen to the navbar. How you want to handle the logo/brand might depend on your ultimate plan with the navigation.:slight_smile:

Hope that helps.


#5

Thanks for responding @jdesign
I have given the link block (logo) a class and made it absolute but the problem with the dropdown component remains


#6

Okay, sorry I didn't understand the issue correctly. I'll have another look later today and get back with you.


#7

Okay, so I got this to work. Ultimately, I started the bar from scratch and added the drop-down to the navigation before I started making the changes. Also, I took everything inside the Nav container out and deleted the container that way the mobile button doesn't need to move.

Unfortunately, I couldn't save my work and I'd done so much testing that I'd destroyed the classes. I'll build you a sample of a structure that should work.

This may not be exactly what you are trying to accomplish and I built it from divs not the menu element (testing for a project) but the layers/structure are there for the nav links and drop down. Hope it helps.

https://preview.webflow.com/preview/navigation-example-site-test?preview=71f829be6e36bc58b80f23fca5a63974


#8

Try starting your navbar design from scratch:


#9

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