Streaming live at 10am (PST)

Navbar won't show full width of navlinks when clicked in preview


#1

When I click on ‘open menu’ in settings while editing in the designer, it looks fine- but when I click preview and click on the nav bar (in tablet, & mobile view) it is constrained to 60x60 px - how do I edit the width of the dropdown so that it shows my nav links?

here’s a quick gif of the issue I’m having.

I’d appreciate any help :slight_smile:

https://preview.webflow.com/preview/tsun?preview=8fd52bd819e65828023a6ce3fb1cb6d8


#2

Hey Tiffany,

I got 3 steps for you :slight_smile:

  1. Make you navbar div width: 100%; and change your background to transparent.
  2. go to Nav button and make it 60x60px and change the background to white.
  3. press preview and see if you can work from there :slight_smile:

L.


#3

hey! I appreciate your help- but I’m still having trouble…

my nav bar is nested into a container 2 instead of a div; the reason why it’s in a container two is because it sits lower on the homepage/ is formatted for that.

i tried to add a div but it still doesn’t work when i nest the navbar into it.

this is my preview link-
https://preview.webflow.com/preview/tsun?preview=8fd52bd819e65828023a6ce3fb1cb6d8


#4

You dont have to touch the container only change the navbar from width: 60px to 100% and delete the Height, then Make the nav button 60x60px :grin:

Your navbar is the ”container” showing your menu and the nav button inside the navbar is the button opening it


#5

ah thank you that worked!
can you advise how to position the dropdown to underneath the menu button instead of covering it?

52%20PM


#6

@Tiffany Yea, you should make the navbar display: block and change the background color to Transparent :slight_smile:


#7

hi, i made the changes you suggested, but it didn’t change.

I tried to move the positioning of the navmenu because it was covering it up the icon, and although it looks like the dropdown works when i’m editing; when i’m in preview, it still covers it up.

this is my preview link: https://preview.webflow.com/preview/tsun?preview=8fd52bd819e65828023a6ce3fb1cb6d8


#8

Did you try position relative?


#9

my navbar and my nav menu is positioned relative


#10

I would suggest moving nav button up to about 40 and nav menu down more until you get what you want.
I would think that it is fine the way it is. Web users have become used to clicking outside of drop down to close and therefore you do not need the button to be visible when the menu is open.
Or you could change the z index on the button to 2(?) I am unsure if this helps at all