[Resolved] Mobile Menu View Broken

[Michael]

Hi all, my menu system seems to be broken on mobile phone as of the last update. This is what I see:

Please can someone help me fix?

[Michael]

https://www.dropbox.com/s/dek6q0vyt6b91v2/Screenshot_2023-04-05-10-49-28-84_3aea4af51f236e4932235fdada7d1643.jpg?dl=0

[David]

Hi there,

add this CSS to your site:

#generate-slideout-menu {
	--gp-slideout-width: 320px;
}

[Michael]

Hi David, I did that but still have the same problem

[Leo]

Any chance you can link us to the page in question with David’s CSS added and all caching cleared and disabled?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

[Michael]

Hi Leo, it’s the menu that runs across all pages on the mobile version of the site, so I’m not sure what to link for you. I have cleared all caches just now.

[Leo]

I don’t see an URL to your site in this thread so I cannot check.

Can you provide the site URL in question?

Thanks 🙂

[Michael]

Sure, it’s reclaimdesign.org

[Leo]

I’m not seeing any obvious issues:
https://www.screencast.com/t/2Sr39qUM

[Michael]

Hi Leo, that’s great thank you, you’re right the menu text is now visible. But the white background area is much wider than before. Is there a way to make it somewhat narrower so it doesn’t take up most of the screen like this?

[David]

OK, you’re site has some custom CSS which is setting the width of the Off Canvas panel, its part of this:

@media (min-width: 320px) {
    body .offside--left.is-open, .offside-js--is-left .offside-sliding-element {
        transform: translate3d(320px, 0, 0);
        -webkit-transform: translate3d(320px, 0, 0);
        -moz-transform: translate3d(320px, 0, 0);
        -ms-transform: translate3d(320px, 0, 0);
        -o-transform:translate3d(320px, 0, 0)
    }

    body .offside--right.is-open, .offside-js--is-right .offside-sliding-element {
        transform: translate3d(-320px, 0, 0);
        -webkit-transform: translate3d(-320px, 0, 0);
        -moz-transform: translate3d(-320px, 0, 0);
        -ms-transform: translate3d(-320px, 0, 0);
        -o-transform:translate3d(-320px, 0, 0)
    }

    body .main-navigation.offside {
        width:320px
    }

    body .offside--left {
        left:-320px
    }

    body .offside--right {
        right:-320px
    }

    body.offside-js--is-left.slide-opened .slideout-overlay button.slideout-exit {
        left:315px
    }

    ul .sub-menu .toggled-on {
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
        margin-bottom:0
    }

    .slideout-navigation.main-navigation .main-nav ul li a {
        text-transform:uppercase
    }

    .main-navigation ul ul {
        box-shadow:0 0 0
    }

    .slideout-navigation ul ul {
        box-sizing: border-box;
        margin: 0;
        padding-left:20px
    }

    .slideout-navigation .main-nav ul ul li a, .slideout-navigation .menu-item-has-children ul .dropdown-menu-toggle {
        font-size: 25px;
        line-height: 10px;
        padding-top: 0;
        padding-bottom: 0;
        text-transform:uppercase
    }

    .slideout-navigation .menu-item-has-children ul .dropdown-menu-toggle {
        margin-top: -10px;
        padding-top: 0;
        padding-bottom:0
    }

    #generate-slideout-menu {
        --gp-slideout-width: 320px
    }
}

If you replace that with:

ul .sub-menu .toggled-on {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom:0
}

.slideout-navigation.main-navigation .main-nav ul li a {
    text-transform:uppercase
}

.main-navigation ul ul {
    box-shadow:0 0 0
}

.slideout-navigation ul ul {
    box-sizing: border-box;
    margin: 0;
    padding-left:20px
}

.slideout-navigation .main-nav ul ul li a, .slideout-navigation .menu-item-has-children ul .dropdown-menu-toggle {
    font-size: 25px;
    line-height: 10px;
    padding-top: 0;
    padding-bottom: 0;
    text-transform:uppercase
}

.slideout-navigation .menu-item-has-children ul .dropdown-menu-toggle {
    margin-top: -10px;
    padding-top: 0;
    padding-bottom:0
}

#generate-slideout-menu {
    --gp-slideout-width: 320px;
}

Now on the last line --gp-slideout-width: 320px change the 320px to a width you want.

Clear your autoptimize and any other caches afterwards.

[Michael]

That’s great – thank you very much for your help David and have a good weekend!

[David]

You’re welcome and you too

[Author]

Posts