Streaming live at 10am (PST)

Can I make dropdown links work on desktop like mobile?


#1

This is the page i'm working with:
http://ltco.webflow.io/home-2

On desktop what I'd like to do is have a fixed nav bar on the left that interacts the same way the mobile version is doing. I can turn the menu button off for desktop here:

Great! Now I've got my fixed navbar down the left side. HOWEVER, when I click the dropdowns it does not push the rest of the content down as the dropdown link gets opened. It just hovers over the content below.

Mobile Version With Content Being Pushed Down:

Desktop Version With Content Being Covered By Dropdown:

3

Is there a way that I can edit this?


Here is my public share link: https://preview.webflow.com/preview/ltco?preview=ece15232e610886486bb36e85e0f288d


#2

looks like you got it solved. It's pushing down on chrome


#3

No. Sorry. I actually published and forgot to turn the menu icon slider back down to tablet. It's not working.


#4

Ah I see. Maybe webflow support has some ideas. the problem is Navbar has set styles that can't even be accessed especially in the interactions. My work around is to create a menu from scratch and then hide it on everything except desktop.

That way you have complete control over all aspects of it. I find whenever I do custom things to a menu I usually find it easier to create from scratch. probably not what you wanted to hear.

always
Jeremy


#5

Thanks, @jbleroux!

@webflow am I able to edit the stock navbar settings?


#6

@jbleroux What's interesting is that if I make my own from scratch and use the Dropdown Link element it still doesn't push down the other dropdown list elements below it. So, the dropdown element "out of the box" is acting differently than on the version on the http://ltco.webflow.io/home-2 page. In the Webflow Startup Kit Template dropdown links there isn't anything that stands out (styling or animation) that looks like it would be causing the "pushdown".


#8

Got it
might work on the standard one too.

open the dropdown menu
select the whole nav-left dropdown wrapper.
change position from absolute to relative. It will push the content down.

Yes it works on the dropdown list too.
Absolute positioning opens in one place. Relative positioning allows the div (list) to act relatively to other elements. Sometimes the smallest thing can be the simplest solution but so easy to overlook. Trying to find the needle in the haystack of design so to speak.


#9

That totally worked! THANKS so much! You're the, man!!


#10

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