Superfly menu gives a side scroller on mobile

Support
#1

Good morning, first of all I have the latest of X and the Superfly menu.

The menu is the ‘full screen’ option so it has the ‘mobile 3 dash’ icon displayed all the time. On the desktop this works fine.

However on mobile it produces a side scroll which looks ugly. Please advise how to remove this. Login details below

Kind Regards

#2

Hi,

We can reduce font size and line spacing of your menus in mobile to eliminate the scroll.

You can try adding this in X > Launch > Options > CSS

@media (max-width:767px) {
#sfm-sidebar .sfm-menu li a, #sfm-sidebar .sfm-menu .sfm-chapter {
    font-size: 20px !important;   
    line-height: 20px !important;
}

#sfm-sidebar .sfm-scroll {
    overflow:hidden;
}
}

Hope that helps.

#3

Thank you for this, the font and line height has updated which is nice but the site can still scroll right.

Check out this screenshot of the homepage

Kind Regards

#4

Hi there,

Please add this as well,

.x-root {
    overflow-x: hidden;
}

Hope this helps.

#5

Perfect thank you!

#6

Glad to know it works :slight_smile:

Have a nice day!