Mobile Nav displays hidden items

Design help General
1

Hey guys, with the transition in how hidden elements work, I’m finding that the class-based approach isn’t working within the mobile nav.

If I make a menu dropdown hidden on the desktop nav, it displays in the mobile menu anyway.

Here’s a demo;

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

2

Hi @memetican, this is not a bug. Here is why; the default Webfow behavior for a dropdown in a menu is to display it as a block element. Your menu is set to hover. So when you hover the element, core Webflow JS runs and sets to block, which displays it.

To override this behavior, you need to override the CSS that controls the display. Setting the element to hidden in the style panel won’t do it.

Here are rules that are affecting this;

@media screen and (max-width: 991px) {
    .w-nav[data-collapse="medium"] .w-dropdown,.w-nav[data-collapse="medium"] .w-dropdown-toggle {
        display:block
    }

    .w-nav[data-collapse="medium"] .w-dropdown-list {
        position: static
    }
}

@media screen and (max-width: 767px) {
    .w-nav[data-collapse="small"] .w-dropdown,.w-nav[data-collapse="small"] .w-dropdown-toggle {
        display:block
    }

    .w-nav[data-collapse="small"] .w-dropdown-list {
        position: static
    }

    .w-nav-brand {
        padding-left: 10px
    }
}

@media screen and (max-width: 479px) {
    .w-nav[data-collapse="tiny"] .w-dropdown,.w-nav[data-collapse="tiny"] .w-dropdown-toggle {
        display:block
    }

    .w-nav[data-collapse="tiny"] .w-dropdown-list {
        position: static
    }
}

If you don’t want to write custom CSS, then create two menus. One for mobile and one for everything else (you choose). Control them with breakpoint visibility. The one for mobile would not have any “custom dropdowns” or whatever you wish.

3

I am rewinding this after looking at this a lot longer. I need to build a similar model I can test. Give me a little bit.

4

Thanks Jeff, that explains a lot-

Both the CSS and the dual-menu workarounds sound solid too.

I’d definitely qualify this behavior as a bug though, in that published HTML+CSS does not match what the designer styles indicate. Any designer-set style settings should take precedence over the default component settings.

Thanks a lot for explaining, and offering the workarounds; In this situation, both are a bit overkill for my need to just hide it for a few weeks, so I’ve temporarily duplicated the menu into a symbol, and deleted those parts in the live published version. Copy-paste makes it relatively easy to bring that particular menu layout back later.

5

Thanks for the feedback. I am chasing this down since there are a couple of recent posts that are related. I will update here as soon as I come up with a functional workaround. Glad you have something in place that addresses your issue. Now I have Sushi on my mind.

6

If that happens, it would be a support nightmare :slight_smile:

I created a pen on codepen that hides the menu dropdown, with a class of hide, on tablets down.

7

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