[Resolved] Mobile Menu SubMenu Items Not Displaying

[Michael]

Hi all,

The submenu items from our Products menu are not displaying on Nikki’s Samsung S8 phone, but they do display on my Samsung J7. She has cleared her cache. Can anyone suggest why this might be and how to resolve? I’m guessing it’s because the width of the screen is different, hers seems narrower and potentially obscuring the drop down arrows, but I’m not sure which section of the css to target to fix.

https://www.dropbox.com/s/lruao3qmumfcyg2/samsungs8.jpg?dl=0

https://www.dropbox.com/s/c3yeih7poptrfl9/samsungj7.jpg?dl=0

https://reclaimdesign-383226.easywp.com/

Michael.

[David]

Hi there,

its because of this CSS you’re using to increase the width of the Slide out – wrap it within a media query so it only applies to screens large enough to accommodate it ie.

@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;
    }
}

[Michael]

Thank you very much David. I will try that now.

[Michael]

Hi David,

That has helped but the menu on Nikki’s phone now is too narrow (but fine on mine weirdly):

https://www.dropbox.com/s/lqwjhr2eyqnxgbj/IMG-20200209-WA0001.jpg?dl=0

[Tom]

Perhaps reducing the font size on mobile would help: Customize > Typography > Off Canvas Panel

[Michael]

Thank you Tom. I will try that.

[Michael]

Hi Tom, I dropped the font size by 3px and it has helped but it’s still causing the menu formatting to go wonky.

https://www.dropbox.com/s/doas502xgtglofj/IMG-20200210-WA0002.jpg?dl=0

Is there a way I can increase the width of the menu wrapper or something like that?

It’s really weird how big a difference there is between the display on Samsung S8 and on my Samsung J7 (which looks fine):

https://www.dropbox.com/s/ztunp692tcu9k4c/Screenshot_20200210-124714_Firefox.jpg?dl=0

[David]

Each mobile device has a set viewport width ( not to be confused with resolution ). The smallest devices are 320px, the J7 is mid size of 360px, and the S7 is a plus size of 414px.

I adjusted the CSS here to cater for a 320px wide device.

If you can adjust your typography to suit that size then you’ll be covered

[Michael]

Thank you very much David – that works!

[David]

You’re welcome

[Author]

Posts