Mega Menu - Resizing window

Mega Menu

Not sure if this is a bug, but I replicated the issue on a blanco page with the nav item from the library inserted.

When resizing the window the modal appears for a brief moment.
Link to recording

Do I mis something or oversee something?

Environment info

  • WordPress version: 6.2.2
  • Gutenberg Plugin version: -
  • Cwicly Plugin version: 1.2.9.6.1.2
  • Cwicly Theme version: 1.0.3

I think itā€™s by design.

You can add something basic like this to your nav block:

.blockclass:not(.cc-nav--open) .cc-nav-wrapper {
   transition-duration: 0s;
}

or as a general rule:

.cc-nav:not(.cc-nav--open) .cc-nav-wrapper {
   transition-duration: 0s;
}

Didnā€™t test extensively, use at your own risk.
Maybe this behaviour can be improved in the future, but not sure if itā€™s needed.

Thank you Marius :grinning:

Maybe itā€™s a personal preference, I personally donā€™t like the ā€˜glitchā€™. Itā€™s like there is something wrong with the site.

You definitely have a point here.
Just didnā€™t want to directly agree, since I didnā€™t check the circumstances in detail yet.

I think for the regular visitor this shouldnā€™t be a thing.
But I can see some potential trouble when clients are checking their sites :face_with_peeking_eye:

Maybe it are my ā€œcompulsive-neurotic-design-habitsā€ :crazy_face:
And, exactly what you are saying, Iā€™m looking also through the eyes of clients.

Again thanks Marius :upside_down_face:

Description:

The transition for the mobile hamburger menu triggers when changing the width of the browser from desktop to ā€œmobileā€ views. There is a flash of both the menu text and the menu background.

Step-by-step reproduction instructions:

  • Create a Nav block and use the default settings.
  • On a desktop sized browser, reduce the width of the screen until the nav elements switches from the desktop view to the mobile view.
  • You will see a flash of the mobile menu text.

I was able to more or less resolve this issue by adding the following styles:

@media screen and (max-width: 991px) {
  .cc-nav[breakpoint=sm] .cc-nav-wrapper {
    height: 0px;
    transition-duration: var(--cc-nav-modal-animation, .4s), height 1ms;
  }
  .cc-nav.cc-nav--open[breakpoint=sm] .cc-nav-wrapper {
    height: 100vh;
  }
}

The issue I believe is that the 0.4 second transition is also operating on the visibility CSS attribute. So when the screen changes from desktop, where it is visibility: visible; to mobile, where it is visibility: hidden;, it takes 0.4s before it becomes hidden.

You can see the same issue occur on the wagepirate.com site, which I know is built in Cwicly. When changing the width of the screen from ā€œdesktopā€ to mobile" a flash of the mobile menu appears on the left side of the screen.

This has also been reported here.

1 Like

Hi @dennis77 and @jkirrane,

Thank you for bringing this up!

In the given situation, this qualifies as an edge case as it doesnā€™t happen under typical user interactions.
Iā€™ll let @Louis go into more detail on this.

Thank you for your understanding.