Mobile Menu View Broken

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

Hi there,

add this CSS to your site:

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

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

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 :)

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.

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 :)

Sure, it's reclaimdesign.org

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

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?

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.

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

You're welcome and you too