I am having some issues hiding an element on a site build.
I have a menu for mobile that I would like to (a) add flex and (b) set main display to hidden as burger menu will open and close this.
For some reason, I can’t hide this and I believe its directly linked to when I set this element to only display on mobiles.
Look forward to any suggestions.
Here is my site Read-Only: https://preview.webflow.com/preview/ytm?preview=4f8b4f9d100670ea4d18bbc736506fa5
Are you using navbar options to show or hide the main menu as opposed to display none? Your read only link is not working.
Sorry link here:
I have the div to only show on mobile screens as the burger menu will manage the display settings.
I was this to be visable:none when viewing these screens until the burger menu opens it. SS attached
Oh right you are building a menu from scratch. I haven’t done this much either, but you are going to need to use interactions to set the initial hidden state of container-nav and also the on click of the burger. you will have to pull that burger out of the menu-right I guess.
Yeah I have that element hidden initially. And then interactions will set first click show and then second click display none again, basically open and close
The issue is I can’t set initial state as display:none - which I am fairly certain is just a bug, theres no reasons for it not to work :S
I don’t see any interactions in your project? You need a “When page starts loading” = hide element to set the initial state by interaction. That works, no bug.
I am using legacy interactions, it has worked with these in the past it should be working with this.
It should be fine to set this hidden and then when burger is clicked it is display flex, thats always worked for me in the past.
Thanks for posting about this behavior and for bringing this to our attention.
There is a known issue with the visibility settings and the team is currently working on a fix but no timeframe at the moment.
As a workaround, for now you can control the visibility with the display options instead - Looks like you are already using this approach on your site and it is working as expected.
Hope this helps!
My current solution works, however, there are issues when a browser window is moved from mobile size (With menu open) to a desktop. I can fix this with custom code but this will work for now.
I’ve noticed another issue which I might post about separately.
A page of mine linked here: http://ytm.webflow.io/account-settings/listing-create-advert
Should have content shown, for some reason the content will not show here on the published link.
In the designer / preview you can see the pages actually have content with no display settings that would impact their visability?
Thanks for anymore updates!
Thanks for the feedback - As soon as we have an update we’ll let you know.
Regarding your second question, the page seems to be reflecting the content on the designer, here is what I’m seeing on my end:
Are you seeing something different? Are you referring to a specific element? Please provide as much details as possible - I’m happy to help further.
It looks like this is caused by an adblock extension. The element’s class name is
advert which is causing an adblock to kick in and hide that element (GIF). If you rename that element without the word
advert you should be good.
Thanks @Brando this was also just highlighted to me from @vincent on a seperate post.
Really appreciate the quick solutions! The more you know
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.