7.1 Mobile Menu Header/Logo Design & Styling

@tuanphan

I'm trying to have my mobile menu so that when you click the hamburger icon the whole background is the same blue as the header with white text/everything else.

I tried your code above and it didn't seem to effect it. 

I'd appreciate any help you may have to offer.

The site is live at: kingdomswimmingclub.ie

On 10/14/2020 at 9:19 PM, emstems said:

@tuanphan

I'm trying to have my mobile menu so that when you click the hamburger icon the whole background is the same blue as the header with white text/everything else.

I tried your code above and it didn't seem to effect it. 

I'd appreciate any help you may have to offer.

The site is live at: kingdomswimmingclub.ie

Add to Home > Design > Custom CSS

.header-menu-bg.theme-bg--primary {
    background-color: #033a88 !important;
}
nav.header-menu-nav-list * {
    color: white !important;
}

Hi @tuanphan, I struggle with alike problems. On my website spooroverlast.nl the mobile menu icon seems to be restricted to show up only as a single dash. No matter what I select under the built in site-header-mobile menu options (the double, triple, paragraph or plus sign...) only the single dash seems to show up.

Would you possibly know what causes this behaviour?
And how to solve it?

Thanks in advance!
Stefan

On 8/28/2023 at 2:25 PM, ZZESTO said:

Hi @tuanphan, I struggle with alike problems. On my website spooroverlast.nl the mobile menu icon seems to be restricted to show up only as a single dash. No matter what I select under the built in site-header-mobile menu options (the double, triple, paragraph or plus sign...) only the single dash seems to show up.

Would you possibly know what causes this behaviour?
And how to solve it?

Thanks in advance!
Stefan

You have this code in CSS box, it caused problem

* {
    transform: unset !important;
    transition-delay: unset !important;
    transition: unset !important;
}

Change it to this

*:not(.top-bun):not(.patty):not(.bottom-bun) {
    transform: unset !important;
    transition-delay: unset !important;
    transition: unset !important;
}

Wow @tuanphan, that fixed it immediately. Thnx!