Streaming live at 10am (PST)

How to make dropdown menu items visible by default on mobile


#1

Hi,
My site's navbar includes 3 dropdowns which open on hover in desktop view.

However, in mobile view, I want the dropdown menu items to be visible by default, as otherwise, in order to get to the dropdown links the user has to tap on the main menu item to open the dropdown, but then, as there's a page behind that top link, the user gets directed to the page, and can't see the dropdown menu items.

For example, tapping on ABOUT US to open the dropdown, immediately takes the users to the About Us page, before they can view the submenu.

I'm really stuck on how to make this work so would really appreciate some help.

thanks
Carol


Here is my public share link: https://preview.webflow.com/preview/hortaxdraft?preview=75b550b2f9581242b65f6fe35448e4cd
(how to access public share link)


#2

Hi,

Mobile design is a big deal. I mean, it's important. Important enough that sometimes it's more important than responsivity.

So in order to build the best possible experience on mobile, you have sometimes to abandon some responsive concepts. Especially for the Navbar.

I personally never use Hamburger menus because it proves to be not efficient at all. I prefer a visible, reworked for mobile, menu, or a bottom bar like you have in mobile apps.

So you can craft 2 Navbars: one you'll hide for mobile devices and one you'll hide for desktop. It adds maintenance but it's better to have one extra navbar and a good mobile experience.

Here's the mobile look of one site I made with Webflow:

www.1001pneus.com

The experience is great. Nothing on top of the screen, everything at the bottom, easy to reach for your fingers.


#3

Hi Vincent

I'm coming round to thinking that this is a better option as I'm not happy at all with the way the menu button works.
I'll give it a try - thanks for your help!
Carol


#4

You're welcome.

It's more a universal topic than a Webflow issue. Webflow provides a great way to develop both ways:

  • a state of the art UI to setup responsivity of elements
  • many, many options to deal with the visibility of elements in order to build unique elements for each device. For instance you can hide something using CSS and display:none, but also the settings in the Settings tab. And you can still use custom code, redirections etc.

The example I showed you above: I ooriginally made it work with responsivity only! And it wasn't that hard. But down the road I wanted it to be easier to maintain as I was delivering the code of the site to the client, for external hosting.


#5

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