[Resolved] Menu Toggle appearing over the logo at center in mobile-view

[Md Ashfak Faysal]

I used this code as suggested by one of the support staff here. It worked totally fine but now the menu toggle at mobile view has shifted to the middle over the logo. Could you please help me with this?

The Site link: https://lessonery.com/

The Issue Image: https://imgur.com/a/u0eji14

@media(max-width: 768px) {
    .site-logo {
        position: absolute;
        left: 50%;
        top: 15px;
        transform: translateX(-50%);
        z-index: 1000;
    }
    .has-inline-mobile-toggle .mobile-menu-control-wrapper {
        flex-direction: row-reverse;
        flex: 1;
    }
    button.menu-toggle {
        flex-grow: 0;
        margin-right: auto;
    }
}

[David]

Hi there,

try this CSS:

@media(max-width: 768px) {
    .site-logo {
        position: absolute;
        left: 50%;
        top: 15px;
        transform: translateX(-50%);
        z-index: 1000;
    }
    .has-inline-mobile-toggle .mobile-menu-control-wrapper {
        flex-direction: row-reverse;
        flex: 1;
    }
    button.menu-toggle {
        flex-grow: 0 !important;
        margin-right: auto;
    }
}

[Md Ashfak Faysal]

Thanks

[David]

You’re welcome

[Author]

Posts