Buggy behavior in nav element and dropdowns in Preview mode

Community resources Bugs
1

seriously,

Despite having labored for 4 hours non-stop, trying not to pull out my hair at the seemingly illogical structure of configuring a responsive Nav menu with for all screens - I do not have the patience to articulate or document every single bloody irregularity, shifting positions and settings, completely malfunctioning relationship between Clicking on “OPEN MENU” in settings but not seeing that reflected as s pseudo class in the styling panel, disappearing and reappearing Menu icon Block that show in some view ports, but not others, and don’t even get me started on the messed up rendering when we go to preview mode and the bloody dropdown menu doesn’t render anywhere near to the position I had just placed it. The menu bar itself grows or contracts seemingly entirely on its own, with no changes to the settings… oh, and did I mention that flipping between a site that one of WebFlows very own team did a re-do of the Navigation I’m speaking of (initially just to resolve an unacceptable issue with flexbox causing a right-shifting on Safari and Firefox browsers), even those settings which I was merely trying to replicate will suddenly shift on their own accord, as if some action on a distinct site was reaching through to another and suddenly randomly affecting it. I could try to do a screen recording of all this, but frankly I just can’t spend a moment longer on this cluster of bugs that I can’t resolve.

This is a rant, for sure, but honestly this is not a platform that can be relied on. I’m not a web developer by trade, admittedly, but I’m no idiot either. I’ve scoured the help-docs and the forum for anything resembling what I’m experiencing. I’m exhausted and at my wits end.

If anyone can decipher this and cares to help me out, I’d be hugely appreciative. As it stands, I’m out a full day’s work just trying to get this to not f-up before my client has a complete loss of confidence in me and my promotion of Webflow.

Reach out and I’ll send you a link to the site.

Thanks,

  • Derek
2

If you want… I will take a look.

Not sure if I can fix it… but who knows.

3

Hi @Derek_vdS thank you very much for your feedback and for voicing your frustration, I completely understand that feeling and want you to know that I am here to help and get these issues resolves ASAP. It sounds like there is some buggy behavior occurring with dropdown elements and the Navbar element in Preview mode but it is difficult to tell or provide further trouble shooting without a Read-Only link to your site.

I’m looking into it now with our team - as soon as I have more information, I’ll email you immediately!

What sites are you seeing this issue occur in? When did it start occurring? Can you send me the site Read-Only links please?

Screenshots or screen recordings are also very helpful with resolving these issues.

Can you please try the following:
(1) Try to reproduce the error while being logged into Webflow using Incognito mode with browser extensions turned off: Browse in private - Computer - Google Chrome Help
(2) If the problem persists, please take a screenshot of your Console and send it to me: Chrome DevTools - Chrome Developers

4

Mind posting a share link?

5

https://preview.webflow.com/preview/soulplay?preview=4d2d970b11d3cf1bc817ca0fc546c0c2

I’m in full scramble moment trying to get some other pages done, but please do have a look. Some universal law will dictate that you will not see the problems I’m experiencing, that everything will be just fine. To be sure, i fixed a lot of things, it’s the process of trying to nail down a moving target (ie shifting Settings). Please have a look.

Thanks for the out reach, everyone :slight_smile:

6

Did this get resolved?

7

Negative, Uzzer. Bugs (and the impact it has on faith/reliability in the product) are supposedly being run up the chain to Product and Dev teams after being witnessed (and hopefully documented by a kindly and patient Customer Service team member yesterday, but I’m still up a river as these bugs are persistent.

Here’s a concise, less ranty list.

  1. Standard Pre-fab Nav Menu Button alters color randomly when editing in Tablet viewport with Menu Open Selected… random color switches right in front of your eyes as you click in to Typography color, on a slight lag. Having to edit this color style in the first place because it randomly changed on its own.

  2. Open Menu button in Settings panel does not RELIABLY producethe pseudo class of “Open” being added to the class for Nav Menu or any other nav object. Reliability is the operative word here - it works some of the time, not others (all presuming that you’ve designated a custom class to that child object) This is the standard logic - click the button, edit the styles of the “open” state, be it menu icon, the dropdown nav menu itself, the contents within. If you think you’re editing something because you’ve clicked the button, but you’re actually NOT because the system doesn’t function properly, then you’re working in a compromised environment.

  3. In Preview mode, the only area in which to test changes you’ve made to dropdown menus, the dropdown menu in Smaller viewports do not reliably drop down, or they start open, then close upon click, and then do not re-open. I now consider this a feature as it is reliable - it happens about 75% of the time now, in my experience. Note that this will happen even with a fresh Navbar, not one that’s been moderately styled.

  4. Position and other stylings inherited by children from Parent objects will inexplicably shift and change. This takes place in the editor, especially when key-shortcut cycling through the elements as I investigate one thing or another that’s not right. As it is NOT part of the webflow product to log or document every state and status of every element within the site and note the precise object/element, we can only assume that this platform unreliability will continue and that it is incumbent upon users to systematically document all their “coding” and style changes, lest the system decide to wonk out on us… Oh wait, isn’t that what I’d do anyways in a classical development environment like Coda? Why am I paying so much for this platform again?

Okay okay, I apologize for that editorial. The frustration is real. And here’s the rub… We’re all individuals in this platform, with different levels of attention to the minute details, different powers of observation of the minutia, distinct cognitive abilities for pattern recognition, and different understandings of what’s working an what’s not. Furthermore, we have variable vocabularies and modes of expressing our observations. We professionalize ourselves so we have some common ground on which to relate, communicate and trouble-shoot, but we’re all just shooting in the dark hoping to be truly understood. I personally tend to drill in to an issue relentlessly, and while my logic and conduct dictates that I blame self, first, platform last, I tend to observe things that would pass most people by. It’s a total pain in the ass - everything seems broken, after a while. A good bug is one that’s super hard to reproduce, and it’s the age old dilemma of SaaS developers to support customers while at the same time maintaining the line that their product is “Totally great, guys :slight_smile:” . That’s all fine, except that there’s a financial exchange; i pay for access to a platform, and service to support my success in it.

Dave Sloane spent three hours trying to help fix this bloody navigation thing and he saw all the bugs. He’s failed to follow up in a timely manner with the things he said he’d follow up with (emails for how to do this and that, a re-do of my menu as he claimed he would explore and escalate the bugs he witnessed as I pointed them out in our screen-share sessions, and I’m going to have to assume at this point that I’m on my own. Is the bridge burnt and I’m no longer a valued customer because of my discontent? I don’t know. I DO KNOW My client will NOT be happy with the lack of progress, and I’m going to have to keep quiet my concerns about Webflow because I was the one who advocated he go down this path on this platform (as opposed to Wix or Wordpress).

Okay, back to work.

8

Waldo,

We haven’t interacted yet. Can you reach out and help me, given that we’re at least in the same time zone?

  • Derek
9

Hi @Derek_vdS

I understand your frustration right now.

I am working on a site with a lot of dropdown elements, more than 20 pages (without the CMS) and 2 navbars for almost every pages on this site.

I had to deal with the same issues you are talking about here and convince myself that it will be ok and every softwares has bugs.

However, if you go on dealing with navbars on dropdown and making all of this responsive inside Webflow, you will understand how it behaves and how you can do to go on designing with this.

I know it’s really annoying, but do not hesitate to refresh your browser, and see your website on the published version whereas with the preview mode when you are dealing with these elements.

Be brave :slight_smile:

Take care

10

Hi @Blaise_Posmyouck,

thanks for the words of encouragement. to be specific, while I do have two “drop down” objects nested in my navigation, I am also referring to the actual placement of the responsive navigation menu when in tablet, mobile landscape and Portrait. The actual position of that menu should a) not be that hard to dictate or style, b) it shouldn’t change willy-nilly as the default seems to work for others c) It was distinctly not functional on Safari and Firefox due to a user-error/bug in the flexbox settings (I’m unclear as to which), but in anycase it trying to rectify the situation it broke even further on Chrome (my primary browser in which I’m developing) d) Preview is an absoulute shitshow of a tool, I’ve decided, as it is completely unreliable and does not reflect changes in real time, and publishing, as you mentioned, is the only way to see the effects… but that’s a wonky workflow step, isn’t it?

Thanks again,

  • Derek
11

I offered help in the beginning…
within a couple minutes of you creating the post.

It was probably missed / overlooked.

If you still need help… give me a holler.

12

@Revolution

Thank you, Brother. How can we get in touch/how can you best help me?

  • Derek
13

As I said, @Derek_vdS, I can only agree with you. These bugs are very annoying and I lost a lot of time because of this.

I guess the only solution here is to be patient and wait for a fixed. If you have to deal with these elements right now, I mean if you can’t wait, then you’ll have to refresh more often :smile:

I’m with you :slight_smile: Take care.

14

ok first of all… you are using the Webflow CMS.

I don’t use this. So I cannot help you there.

In reviewing the entire thread…

  • you are ranting alot…
  • sorry to blunt… but I am a blunt person. I tell you exactly how it is.

In testing your site… I can see a issues

  • but I’m not sure if they are the issue you are concerned about.

This is how you can help me… help you.

Provide a bullet list of issues.

Tell me:

  • what element is having the issue
  • a description of the issue
  • and what it’s suppose to do.

Screenshot or images of the actual issue are extremely helpful.

If you have Mac…

I can recommend Jing from Techsmith to capture free screenshots.
The software will also let you add notes to each image.

I use QuickCast to capture screen videos

  • there are many others you can use instead

http://quickcast.io/

Post them here… or you can send them to my email address (which I PM’d you)
and you can even email me directly.

If we can’t fix the issue through posts / email… we can get on the phone or skype if needed.

But the bulleted list is where we can start to fix this.

With that… I can at least tell you

  • if the issue is with your design… or with Webflow.
15

also… I need to see the PUBLISHED site as well.
Not just the PREVIEW.

16

@Revolution

I have words and intelect, I use them. Extensively. I make no bones about ranting, but I keep it real and I keep it civil. I balance that with being reasonable and understanding an compassionate. Thanks for observing and the feedback… bluntness is welcome.

Note that I found a bug with Quickcast.io… in that you can’t actually download it. Their link directs to iTunes, as opposed to the App Store. Searching within the Appstore yields zero presence. What’s a brother to do, man?

I am using CMS, but my problems at the moment have nothing to do with that.

I don’t expect that you’re going to solve the platform bugs, and I’ve itemized the issues with the navigation above. Right now what I need help with is fixing it up so it is remotely presentable to my client. Here’s what I need it to look like:

1400×368 632 KB

After yesterday’s “support” session, here’s what it currently looks like:

1400×421 592 KB

Note that we put some color on the various elements and wrappers to distinguish it from a duplicate site that Dave Sloane had made tweaks to. Ignoring those editable settings for a moment, I’m currently experiencing the
following issues:

a) stacked Nav Menu - NEEDS to be horizontal again. I just changed settings in Flex to the Nav Menu (needed a class assigned to it to get access to settings so that I could undo an unknown change to the default, even after having replaced the entire Nav Menu with a fresh one… ugh.

b) MAIN ISSUE I WOULD LOVE HELP WITH: Getting the nav menu Icon (ie the Three bar “hamburger”) to display perfectly centered in the Nav Bar when in Tablet, Portrait, and landscape for Mobile devices, with the dropdown menu appearing and disappearing directly below the bottom of the NavBar (NOT just the hamburger). The menu items should be Centered in all viewports, the length of the dropdown menu dynamic and proportionate to the # of items within it. This is currently a non-functioning/inconsistent/unreliable UI and it’s a dealbreaker.

b2) Within the Nav Menu on desktop, there are two items that are dropdown menus unto themselves. Each drop down for ABOUT and EXPERIENCE should be perfectly centered underneath the Object, in ALL browsers, not just chrome. When looking on tablet and smaller viewports, these become nested dropdowns within dropdowns. The should have the same stylings, and the interaction should be smooth such that when a user opens/clicks/navigates onto or between About and Experience, they have a smooth/logical transition of one dropdown closing and the other opening. If this can’t be done (I don’t see why it shouldn’t - it’s not an uncommon design), then I would like whatever is workable.

the published site is Soulplay.webflow.io

My phone number is 415 202 3991 and skype id is dvdschroeff. Google hangout with screenshare might also be an effective way of doing this quickly together. I appreciate deeply your even offering to help, and whatever level of communication you’re willing to extend to get me through this.

Cheers,

  • Derek
17

Issue: a) stacked Nav Menu - NEEDS to be horizontal again.

Response
What I see in the Desktop / and Tablet looks exactly like what you want.

Desktop - Preview 1/12/2017

1126×772 1.17 MB

Tablet - Published 1/13/2017

800×600 682 KB

[quote]

Issue b) display perfectly centered in the Nav Bar when in Tablet, Portrait, and landscape for Mobile devices

Response
It is.

Tablet - Preview 1/12/2017

818×682 658 KB

Tablet - Published 1/13/2017

800×1067 969 KB

Tablet - Preview - 1/12/2017

783×293 62.2 KB

Tablet - Published 1/13/2017

800×1067 760 KB

Issue b - continued “with the dropdown menu appearing and disappearing directly below the bottom of the NavBar (NOT just the hamburger).”

This I cannot seem to fix. I tried unlinking the symbol - but I get Webflow error message.

This morning I checked… and it looks like you’ve updated the application
and now it’s broken.

893×268 62.8 KB

18

see video
http://quick.as/xpwas3n63

Obviously it’s not “final product”… it’s simple a test comparing what you need to what you have.

  • but… Is this “basically” what you are looking for ?

I made the dropdown menu a different color

  • so you could there the top is
19

Revolution,

I appreciate your attempt to help, I do. I had to keep moving forward, and powered through some changes and hurdles. You were undoubtably seeing a published site several versions past what I had sent screenshots of - my apologies.

Gotta keep moving forward and producing, not sure that help or attention to glaring system bugs will come fast enough for my/our collective needs.

I may reach out for further advice, if you’re open to that?

Thanks, Revolution!

  • D
20

Hi @Derek_vdS firstly thank you very much for reaching out and for raising all of these questions. I want you to know that you are more than welcome to reach out to me directly anytime by tagging me in a post @Waldo or messaging me directly.

I am here to help and will do everything in my power to help you achieve your goals. Please keep in mind that when an issue arises that can be resolved by making design changes to a site, I will point you in the right direction and happily help further during my off hours.

If any of us ever misdiagnoses a bug as a design-related issue, that is clearly a mistake on our part, and I will be the point of contact to get that resolved as soon as possible.

I’m going through each of your questions as I see them here in the post regarding the different elements to see if I can get you pointed in the right direction.

  1. The Navbar element is a complicated element with many intricacies, pieces and customizable options. I’ve seen flexbox styles interfere with the nav menu element (as the navbar element has been around long before we released flexbox styles) and it looks like some flex styles are causing the issues in your example. This design you’re wanting is fairly quickly achievable with box-model styles but requires quite a few changes to be made to the navigation and may be simpler to achieve by dropping in a new nav element and styling it. I could put together a video tutorial showing how to rebuild the nav and make it responsive for you if that would be helpful?

To activate the open and closed state of the nav menu on mobile viewports or when you have it set to the hamburger mode, navigate to the “Settings” tab while you have the menu element selected (keyboard shortcut to settings is “D”), within there you will see an Open Menu button.

When you press this button, you will see the menu toggle open/closed. I usually select the “Menu Button” element when toggling the menu open or closed. When you do this, you can style the “Open” state of the nav menu (usually the menu button color is styled for the open/closed state):

1567×866 1.48 MB

If you don’t see the “Open” pseudo state when a nav menu is set to open then that is a bug (which I have not yet been able to reproduce on this end yet but am looking into).

2-3. This sounds like a bug in Preview mode of the navbar menu not opening on click, I’m looking into this and will let you know as soon as I have more information. Also please note that the dropdown element can also get complicated quickly and has many intricacies to styling the element.

Also, which styles are you seeing inherited in child elements/not inheriting. Please note that parent styles are inherited by a child element (like colors) unless the child element has styles which are applied with a new class.

I’ll be in touch again shortly, please let me know if you have any additional questions or if you run into anything else, I am here to help get it resolved.

1 Like