off canvas panel is flashing

Hi June,

Can you disable your caching plugin and check if the same issue occurs? Let us know how it goes.

Hi Elvin, I've disabled the plugin and checked but it's still the same.

Hi Elvin, I’ve disabled the plugin and checked but it’s still the same.

Can you keep it disabled and let us have a look?

You can clone the site to a staging site if you must have the current setting intact for the live site. :D

Please find account info in the private area.

The default login page seems to have been page.

But here's on to try:

On Appearance > Customize > Colors, can you try setting the color of "Header" and "Primary Navigation"'s background color to rgba(255, 255, 255, 0)?

The white flash you're seeing seems to be the white background color assigned from there.

Alternatively, you can try adding this CSS:

nav#mobile-header.toggled {
    background-color: unset !important;
}

nav#mobile-header.toggled .site-logo.mobile-header-logo:not(.page-hero-mobile-logo) {
    display: none !important;
}

nav#mobile-header.toggled span.gp-icon.icon-menu-bars {
    display:none;
}

Hi Elvin, your suggested changes and code have solved the flashing problem thankfully.
The desired design still needs to be achieved as in the link here. Please assist further.

The default login page seems to have been page.

Are you able to login to the site?

Are you able to login to the site?

I wasn't but perhaps it's not necessary as the issue is mostly front-end related. :)

Hi Elvin, your suggested changes and code have solved the flashing problem thankfully.
The desired design still needs to be achieved as in the link here. Please assist further.

Can you specify the parts?

If it's the hamburger animation, that requires customization beyond the scope of the theme's support, unfortunately.

If it's simple sizing and positioning, we can do that with CSS:

Example:

.slideout-navigation.do-overlay .inside-navigation {
    padding: 10px !important;
}

figure#off-canvas-logo-image {
     position: absolute;
     left: 10px;
     width: 151.25px;
     top: 10px;
}

.slideout-navigation.do-overlay .slideout-exit, button.slideout-exit.has-svg-icon svg {
    right: 12px;
    top: 15px !important;
}

If it’s the hamburger animation, that requires customization beyond the scope of the theme’s support, unfortunately.

No problem at all :D It is working smoothly which I was more concerned about. Thank you for the great support :)

No problem. Glad to be of any help. :)