Streaming live at 10am (PST)

Dropdown menu design issues


#1

I have created a Dropdown menu as the first category in my Navbar links (shown as Products). I need help with the design and how it displays in desktop, tablet and mobile views. It currently will expand the entire header instead of overlaying the page. Also when I switch to a smaller screen I would like the Navbar to display on the right in a compact list and cannot seem to decrease the space between link to achieve this.
Here is the read only link
https://preview.webflow.com/preview/fabricandart?preview=2a8d0b79d036acdbae33cf4104b10ab1
and a screenshot of mobile view
Screen Shot 2015-08-17 at 4.40.43 PM


#2

Hi @eseveri, thanks for the post. The image you posted did not seem to make it :-/ Could you repost another image ?

Cheers, Dave


#3


#4

Hi @eseveri so the issue is with the way you structured the nav:

The best solution is to re-make the whole menu,
I restructured it like below:

and it works well.

In terms of the actual dropdown, I remade it from scratch and it worked perfectly, you may have to style the "dropdown menu" a bit to position it right but otherwise it should be fine.

Often I have found that it is just much much easier to recreate the entire section from scratch than to try and identify and issue, and it tends to help clean up the section generally when you redo it.

Let me know if you need more help,

Arthur


#5

I need a visual on this. I can see you arranged links differently, with the Dropdown as the second link in the Navbar but cannot see how it displays in design view. I though my problem was more to do with applying styles rather than placement of the actual Dropdown.


#6

Arthur, I've recreated the navigation now numerous times, trying to configure the view so that it displays well in each view. For some reason, even though a basic design, I'm having trouble getting the Desktop and tablet to show the navbar and dropdown in a horizontal line and then switch to the hamburger menu when in phone view. I either lose the menu icon altogether or end up with the dropdown screwy. Can you help please? I'm starting to think I should give up on the Dropdown.
https://preview.webflow.com/preview/fabricandart?preview=2a8d0b79d036acdbae33cf4104b10ab1

Screen Shot 2015-08-18 at 6.12.49 PM


#7

Here is my most updated navbar design
https://preview.webflow.com/preview/fabricandart?preview=2a8d0b79d036acdbae33cf4104b10ab1


#8

Hi @eseveri, one issue I see, is that you have one nav bar nested inside of another, the navigation box navbar is under the header background navbar.

I would recreate the navbar, and do not nest the navbars under each other. You should only need one navbar to get it to work smile

If you need to use a background for the navbar, put a section under the body, add a style to that, and then drag the navbar into your section smile

Could you make that change first, then I can take a look further smile

Cheers,
Dave


#9

HELP PLEASE, I've been trying to get a response from you guys for days. My hamburger menu will not work. I've created my Navbar, which happily displays a hamburger menu on mobile view, but when I click it I get this error "cannot find a page to switch to." I've double checked all my links in the navbar, they work fine. Why am I getting this message. Please help I've been fiddling with this for days! I've tried moving the menu button to different places and nothing seems to work. I recreated the entire navbar and still nothing seems to make a difference.
https://preview.webflow.com/preview/fabricandart?preview=2a8d0b79d036acdbae33cf4104b10ab1
Screen Shot 2015-08-21 at 10.10.04 PM


#10

Hi @eseveri, thanks for the update, I have taken another look, and it looks like you are getting a lot closer smile

I made a quick video with some additional suggestions, to get the menu working correctly smile

Cheers,
Dave


#11

THANK YOU THANK YOU THANK YOU!!!!! It's the little things in life! sweat_smile
Moving forward!


#12

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