Hopefully a simple one: I have a dropdown menu that I’d like to hide on different breakpoints. Selecting the item and choosing Display None still shows the item. What am I missing?!
@ConnectCreativeDes - This is curious behavior and appears to be related to your design. Can you set your desired display settings and publish to your webflow.io site? I would like to inspect the rendered code.
I have a dropdown menu inside a Symbol that I’d like to hide on different breakpoints. Selecting the item and choosing Display None still shows the item. If I try with anything BUT a Dropdown, say a text box in my symbol, it works fine - it appears there’s an issue hiding Dropdowns inside my symbol.
It’s ‘Dropdown 4’ inside ‘Navigation Section’ Symbol
.
It looks like the classes that hide elements are not being applied from the designer to that element.
I added them manually in chrome dev tools and it does hide that element just like the other menu items. A quick test of hiding dropdowns on different breakpoints works in the designer.
I would recommend contacting support. This looks like a bug.
I guess WF staff are busy at the mo, had no reply yet. I’ve seen on another forum someone else had reported the same bug and WF are aware of it. Someone suggested as a workaround to set the Dropdown to 0x0 px where i’d like it to be hidden until its fixed which works a treat.
Hi @webdev and @ConnectCreativeDes, there is an open bug issue with the display none on the dropdown, sorry to hear that this has impacted your work.
Another possible workaround is to add a little custom css in the head of the site to hide the dropdown when the screen size reaches a certain point, see here:
<style>
[@media](https://github.com/media) only screen and (max-width: 768px) { /*width can be changed as you see fit*/
.dropdown-class-name {
display:none !important;
}
}
</style>
As soon as there is an updated on the visibility for dropdowns in navbars on lower devices not having any effect, I will post and update. Thanks in advance.