Change position of the superfly menu on a specific page

Change position of the superfly menu on a specific page .

COuld be possible to move the position of the superfly menu on the right upper corner on a specific page Using a Id. of the page ? Maintaining the left upper corner position for the rest of the website ? thanks kind regards !

Hello @Borislav.VD,

Thanks for asking. :slight_smile:

You can add following following CSS under X > Theme Options > CSS to change the position of Superfly menu:

.page-id-115 .sfm-rollback {
    right: 0 !important;
    left: auto;
}

If you would like to learn about finding page/post id, please take a look at following tutorial:

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

the button appears on the right but it creates a strange behaviour . Could be possible to invert it in order to use it in that way only on that ID on right position http://superfly.looks-awesome.com/?demo=2

I mean open the menu on the right part of the page . Right now the button is on the upper right corner but the menu is on the left part of the page . I wish to move the button and the menu on the right part similar to the what appears in the url

Hi There,

Please update the previous CSS to this:

.page-id-115  #sfm-sidebar,
.page-id-115 .sfm-view-level-2 {
    right: 0;
    left: auto;
    -webkit-transform: translate3d(300px,0,0);
    -moz-transform: translate3d(300px,0,0);
    -ms-transform: translate3d(300px,0,0);
    -o-transform: translate3d(300px,0,0);
    transform: translate3d(300px,0,0);
}
body.page-id-115.sfm-body-pushed>* {
    transform: translate3d(0,0,0);
}
.page-id-115 .sfm-rollback {
    right: 0 !important;
    left: auto;
}

Hope it helps :slight_smile:

@thai Unfortunately the button have dissapeared and there is not a menu there . I have cleaned cache and cloudflare . :frowning: ;(

Hi There,

Please update the custom CSS again:

.page-id-115  #sfm-sidebar,
.sfm-pos-left .page-id-115 #sfm-sidebar .sfm-view-level-2 {
    right: 0;
    left: auto;
    -webkit-transform: translate3d(300px,0,0);
    -moz-transform: translate3d(300px,0,0);
    -ms-transform: translate3d(300px,0,0);
    -o-transform: translate3d(300px,0,0);
    transform: translate3d(300px,0,0);
}
body.page-id-115.sfm-body-pushed>* {
    transform: translate3d(0,0,0);
}
.page-id-115 .sfm-rollback {
    right: 0 !important;
    left: auto;
}

If it still doesn’t work, please provide us with your admin account.

Thank you.

thanks @thai
it is far better the button appears , the menu is where must be , but the problem is that the submenu does not appears into the website . Could be possible to make it open into the website . You can check the live version in order to see what I mean . thank you ! It is almost done thanks for your support !

Hi again,

I checked your site and I see you’ve multi level menu items which you cannot handle with custom CSS without disturbing the layout. You should change the position of your menu panel and button via Superfly settings instead.

Thank you for understanding!

ok and which would be the code if I wish to use the same rule for 2 pages , could be possible to give me an example with id 345and id page 115 for example thank you

Hi,

To add the other page, please change code to this.

.page-id-115 #sfm-sidebar,
.sfm-pos-left .page-id-115 #sfm-sidebar .sfm-view-level-2,
.page-id-345 #sfm-sidebar,
.sfm-pos-left .page-id-345 #sfm-sidebar .sfm-view-level-2 {
right: 0;
left: auto;
-webkit-transform: translate3d(300px,0,0);
-moz-transform: translate3d(300px,0,0);
-ms-transform: translate3d(300px,0,0);
-o-transform: translate3d(300px,0,0);
transform: translate3d(300px,0,0);
}
body.page-id-115.sfm-body-pushed>*,
body.page-id-345.sfm-body-pushed>*  {
     transform: translate3d(0,0,0);
}
.page-id-115 .sfm-rollback,
.page-id-345 .sfm-rollback {
      right: 0 !important;
      left: auto;
}

For your button, you can add this code.

.sfm-rollback {
   width:60px;
}

Hope that helps

ok great thank you for your support , the last question

is this code responsive for different devices ? I mean this one , thanks once again

.sfm-rollback {
width:60px;
}

Hi Borislav,

The code you have mentioned is limiting the width of the hamburger icon section to 60 pixels to avoid having the cut off problem you have mentioned.

I am sure you will understand that the requests are all out of our support scope and considered as a custom development. If you need more customization you will need to hire a developer.

Thank you for your understanding.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.