Streaming live at 10am (PST)

How to remove dropdown arrow from Dropdown menu item?

I would like to remove the arrow on the default dropdown nav item. How do I delete this?

Here is my public share link: LINK
(how to access public share link)

Select the icon and delete it.

I cant select it! When I hover over it, it goes away and theres nothing to click on. When I move the mouse away from it, it shows back up again so frustrating!

I got the arrow to go away but now the text inside the nav button isnt centered because its still thinking the arrow is next to it. How do I get it to be centered? I already tried centering it with the typography tool but that didnt do anything.

Hi @gschultz

That’s probably because the dropdown toggle has default padding left of “20px” and a right padding of “40px” when the arrow is in place. If you delete the arrow, set both padding at equal value of 20px and it should center the text. :slightly_smiling:

Thank you Steven, but I have tried that and didnt change a thing. I made sure all margins and paddings are set to 0.

Here is my link, you can see that I have it all set to 0 for the paddings on all 4 sides and the text wont center.

Hi again!
Had a look at your site and you have to select the Toggle-element of the Dropdown. Those still have the values of 40 and 20 :slightly_smiling:

Oh you mean select it within the heigherarchy itself okay I get it now. Hopefully it works after this, thanks again @StevenP

1 Like

You can select different dropdown elements (or any other elements – not just the dropdown) with your arrow keys on the keyboard too. E.g you click on your dropdown widget in the designer, you’ll select the Dropdown Toggle-element. If you then press the up arrow, you’ll get to the Dropdown Base. Click again and you’ll select the entire nav menu of the Nav itself and so on and so on.
Click the down arrow and you’ll move the other way… :slightly_smiling:

I just removed all the paddings from all of them and still no difference. I am lost here. The higherarchy is extremely confusing, I am used to coding out a navbar from scratch and this is just seeming to be way to difficult and time consuming to do these simple tasks.

and now i feel like my classes are all screwed up, it looks nothing like if you were to hard code it thats for sure.

No, you absolutely don’t have to hard code it.
Hold short…recording a GIF for you :slightly_smiling:

I just cant figure out how to get the text to be centered, its acting like the arrow is still there or something even though I deleted it and set all the paddings to 0.

Hmm…unless you have som weird cache problems that the desinger won’t recognize the changes you do, this is how it all was solved for me using the instructions I’ve posted earlier:

See this animated GIF:

oh, your setting the navlinks to 20padding on all 4 sides. I was setting it to 0 on all four sides. I noticed on this gif you sent me that my hero image wasnt displaying fullwidth. Why does it display fullwidth on my macbook pro but doesnt in your gif?

sorry for having so many issues, just trying to become a master webflow user so I am trying to learn everything with as much detail as possible so that I know how to do it for future projects.

My bad, I’ve should have written that…that you should set both sides to 20px :slightly_smiling:

Regarding the hero? What machine are you on? I’m on a 21,5" iMac so that might be the reason - my screen is to big and your image is to small. I ALWAYS go for at least 2560px in width to ensure most of the screens that we normally use in everyday life will show the image in full width from side to side.

That’s a good approach! Feel free to ask more if you struggle with something again :slightly_smiling:

okay, ya im on a 15" macbook pro so that makes sense. One more question, I have 3 nav items with dropdowns. How would I structure those pages? Would I make the main page be a folder and then have all the sub pages inside that folder or should I just create new pages and just have them listed as a normal page in the page tab?

It’s up to you. But I’m always very, very, very organized. So for me it’s a no brainer - Folders!

The dropdown name is “My Baby”. So I would create a folder called “My Baby” and list all pages for that dropdown insde that folder.
Same procedure with the other dropdown. :slightly_smiling: