Dropdown menu doesn't go away in mobile view

Design help General
1

Hi,

I recently purchase this Chicago template and unfortunately I noticed too late (after editing the entire site) that the drop down menu function doesn’t go away in mobile view. So I assumed I was at fault and went to the original template to make sure it worked there and then redo it from the start.

However, turns out the template is bugged from the start. Unfortunately the creator doesn’t respond (for about 2 weeks now).

I know extremely little about webflow so I am afraid that editing at random will make me break the rest of the design. Does anyone know if there’s a simple fix to this?

Here is my site Read-Only: Webflow - Chicago
(how to share your site Read-Only link)

2

Do you mean the Services Dropdown. It’s a dropdown, it won’t change on mobile. If you want it to just show as menu options you’d have to recreate them as their own nav options and Display:none on higher breakpoints in the Nav, and then hide the dropdown on lower breakpoints. They’ll need a different class or combo class than the other nav items.

Check out the university. https://university.webflow.com/lesson/intro-to-breakpoints?topics=layout-design#overriding-styles-on-breakpoints

3

Hi Jakes, thanks for getting back to me. Yes that’s correct, I mean the services. And now I see how poorly i phrased my request, sorry for that.

What I mean specifically is that if I hoover over the drop down menu for services, click a service, say “family law” and then load that page - the drop down menu/nav bar does not dissapear upon loading. So the content on the page is hidden behind the mobile view drop down menu/nav bar. See image below.

So what I want to know is: How I can edit the drop down menu /nav bar so it stops hiding the content upon having loaded a page in the mobile view?

Skärmavbild 2024-02-26 kl. 14.21.14
Skärmavbild 2024-02-26 kl. 14.21.14722×1254 37.5 KB

4

Mmm, the Nav menu’s not closing, so might need some custom code in the project footer to listen for a click on those and close it.

<script>
$('.w-nav-menu').on('click', 'a', function() {
  $('.w-nav-button').triggerHandler('tap');
});
</script>
5

Ok thanks for that suggestion. “listen for a click”, is that relevant for someone browsing on a mobile phone? Does it mean it would only remove the menu upon an additional tap with the finger instead of after x seconds?

6

The script adds an event listener for click events on anchor tags (<a> ) that are children of an element with the class .w-nav-menu . When a user clicks on one of these anchor tags, the script triggers a ‘tap’ event on an element with the class .w-nav-button .

7

Alright thank you. As I have absolutely no idea what that means but I’m taught to always listen to strangers on the internet I’m happy to give it a go given my own incompetence on the matter.

Would it be too much to ask you to add screenshots of exactly where (and how I find) that script is supposed to go?

8

Project Settings > Custom Code > Add code before tag.
Might have to change your classes in the script to match what you have.