Streaming live at 10am (PST)

Styling the Navbar as a drop down menu


#1

Hi all,
I'm trying to style the navbar to match a drop down menu. The expected action is that after a user signs into my app on desktop or tablet, the drop down settings menu will appear upon click. For phone views, the webflow hamburger icon & side menu will be used.

With that said, I've had some difficulty styling the drop down menu to "lock" under the nav link. Best I've come to solving it is to use % on the right side for absolute position. Solves it for the specific devices of 'laptop' and 'tablet' (see image below), but on larger screens (or screen sizes undefined by webflow breakpoints) the drop down will slide across the screen to uncontrolled locations.

Any thoughts? Thanks!

I can get it to look ok on desktop & tablet by setting a specific % or margin px:

But it looks awful on any in-between views or larger desktop monitors:


Drop Down Menus
Dropdown Menu Hacks & Requests
Drop down menu causes page to jump to the top
#2

Any ideas out there? Could really use some help on how to style this navbar option correctly. Is there some way to constrain the drop down menu to the same width as the container that holds the icon? Thanks!


#3

can you give us your link?


#4

This isn't what you mean?
http://nicebg.webflow.com/


#5

Hey @rowan,
Thanks for your response. I'm trying to create a drop down menu where the right edge is flush to the width of the menu icon area for desktop and tablet view. Pretty standard stuff, but I can't figure it out w/ webflow.

When you add a new navbar widget and select 'drop down' the drop down spans the width of the screen by default. I've been able to get it to be flush with the desktop & tablet menu via % or via playing with margin, but this doesn't solve other screen views - the drop down no longer stays in place.

Closest I've come to locking it in it's proper place is by giving it a max width of 940px, but then the width becomes difficult to change while keeping it in place on the right side.

end result should have the placement and width of the drop down look like this:


#6

The link doesn't show us the logged in menu state and doesn't allow for us to change to the other page when in preview mode.

Did you try position relative (keeps items in document flow), then use float left/right to keep lower content from pushing down, display list-items block with fixed width to control width and positioning, using line-height as size of elements helps keep text centered vertically within your list items and then use padding to position the text.

These are just shot in the dark ideas since I can't play with your menu.


#7

I've set the logged in menu state as the home/default - you should be able to check it out now.

I think I've tried that. Styling the text hasn't been a problem - just trying to get that menu to stay in the correct spot.

@pingram3541 @thesergie Would love for you to check it out if you have a moment?


#8

Hey Todd,

Navbars aren't intended to be used as dropdowns, but you can finagle some things to make it work. The main problem that you're running into is the Nav Menu in the open state. We made it act kind of like a container so that the text inside will automatically fit to the edges, but we couldn't use a container because that means adding a container inside the Nav Menu at all times (we decided that would be crazy).

So here's a hack you can do to make the Nav Links align to the right while making the Nav Manu also align to the right under the button. Like this:

  1. Select Nav Menu and give it transparent background.
  2. Drop a Block in the Nav Menu and give it width 940px and make it Margin left and right Auto. (For tablet give it width 728px). You just created a "Container" using a block.
  3. Give all the links a class and Margin-left Auto and Margin-right 0. Then give it a width.

Try this out and see if it works. It worked for me. Also remove all the styles you added to Nav Menu besides fill color transparent.


#9

@thesergie dude, this hack ROCKS! Thanks so much!


#10

#11

#12

Hi @thesergie After scrolling down a page, clicking the dropdown menu in the topnav 'pops' the page body back to the top. Any ideas on how to fix this? Thanks!


#13

There can be a lot of different things that can cause this. Can you post your subdomain so I can see how you have it set up?


#14

Hey @thesergie apologies for the delayed response - thanks again for taking the time to help me with this.

I still have a ton of refactoring work to do on the live site, but wanted to get it out there smile


#15

Sweet site @Todd! Glad to see it live in the wild!

What page is the problem on?


#16

@thesergie You can see it on the homepage, but you need to be a logged in user to have access to the dropdown menu. I'll email you a demo account link.


#17