Moving image on click (off canvas toggle)

[mrcanngo]

Hi,

For some reason, when I click the menu button on my webpage: https://www.brainglish-intlschool.com/home-v-4/

The menu image moves to the center of the page really quickly before getting covered by the off canvas page.

I’m quite sure it’s some css animation delay I added and am completely lost on how to fix it.

Can someone please help me make it so the background image doesn’t move when I click on the menu button?

Thank you,

[nabeel]

Hi @mrcanngo,

Thank you for reaching out to us. It’s happening because of your class bb_menu being applied to both the toggle and the off canvas container. To fix this, please find this code:

.bb_menu {
    background-image: url(https://www.brainglish-intlschool.com/wp-content/uploads/2019/02/menu_text_outlines.svg);
    background-size: 4vw;
    background-repeat: no-repeat;
    background-position: center;
}

And replace it with:

.bb_menu.x-anchor-toggle {
    background-image: url(https://www.brainglish-intlschool.com/wp-content/uploads/2019/02/menu_text_outlines.svg);
    background-size: 4vw;
    background-repeat: no-repeat;
    background-position: center;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Cheers!

[mrcanngo]

Wow that makes so much more sense now. Thank you so much! That worked.

[thai]

You’re most welcome.