Streaming live at 10am (PST)

Display 'None' not hiding object

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?!


Its ‘Dropdown 4’ inside Navigation Section.


Here is my site Read-Only: https://preview.webflow.com/preview/fixfire?utm_source=fixfire&preview=b6547784705bd452281a3b6e326f4fd0
(how to share your site Read-Only link)

@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
.
17


Here is my site Read-Only: https://preview.webflow.com/preview/fixfire?utm_source=fixfire&preview=b6547784705bd452281a3b6e326f4fd0
(how to share your site Read-Only link)

Hi, thanks for looking into this. I’ve set the Dropdown as hidden and published the site here: http://fixfire.webflow.io/

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.

1 Like

Hi there, many thanks for taking the time to look at this, greatly appreciated. I’ll send a bug report off to support and see what they say.

Cheers :slight_smile:

1 Like

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.

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

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.

1 Like