Superfly - different menu style depending on devices

Support
#1

Good morning, i am using the side panel Superfly menu on my website and i would like to know if it’s possible to place it to the left in computers and to the right in tablets and mobiles. Thanks in advance

#2

Hi There,

That might be possible with custom CSS. To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

#3

Good morning,

I indicate the url: http://nuevo.casinomediterraneo.es/

Thank you very much

#4

Hey @CasinoMediterraneo,

Thanks for providing us website URL.
I am unable to visit your website, It says authentication required. Please share login details using Secure Note so we can assist you further.

Regards.

#5

Hi there,

Thank you for providing the login information. I went over the button section of the Superfly admin options and add the option below:

calc(100% - 100px) is a CSS unit which says that go 100% to the right of the screen but subtract 100px to have a breathing space at the right section of the screen.

This will not take into the effect unless you add the CSS code below to make the menu button in fixed position. I did that by going to X > Launch > Options > CSS:

.sfm-navicon-button {
    position: fixed;
}

Hope it helps.

#6

Thank you Christopher, but the menu is still at the left of the screen only the icon moves to the right part.

What i need is to have the menu as its looks in the left part for computers, and place it in the right part for mobiles and tablets

#7

Hi there,

Unfortunately, this will need extensive customization which is out of our support scope. You will need to hire a developer regarding this, to implement such a functionality for you.

In our turn, we can ask this as a feature request from Superfly developers if you are interested in.

Thank you.

#8

Im trying to change the width of my SFM on the mobile device like phone an tablet.

#9

Hi @maxmars1973,

Thanks for writing around! You can change the width of your SFM by going to Dashboard > Superfly > Menu Panel > Styling and change the width of your menu for each level.

Cheers!

#10

Yah but how can i have different width for the sfm on desktop and mobile

#11

Hi there,

You mean by making it full-width on tablet and mobile? You can do that by adding this CSS to your global custom CSS.

#sfm-sidebar, .sfm-sidebar-bg, #sfm-sidebar .sfm-nav, #sfm-sidebar .sfm-logo, #sfm-sidebar .sfm-social, .sfm-style-toolbar .sfm-copy {
    width: 100% !important;
}

Hope this helps