Superfly Toggle Icon position

Support
#1

Hi there,

I’m struggled with this issue about horizontally centering Superfly hamburger button.
“Horizontal Shift” value field only works with pixel (using percentage just moves the icon a little bit).
The menu icon has nothing special or customized. I just set up the menu in Superfly and activated the hamburger icon, but it only stays sticked on the top-left corner of the page.
I really can’t figure out how to center it. I tried with CSS but I’m a little out of practice.

Help! Please!
Alessandro

#2

Hi @snowtura,

Thanks for writing in!
Can you please send your website URL so that we can give you a proper answer.
from your license page, I am not able to figure out on which website you have the issue.

Thanks

#3

Hi @basanta

thanks for your help.

Website is https://www.weblues.it and as you can see, my menu icon is still stuck on the left side of the page. I would like to center it, like the rest of the content in development but I can’t.

Thanks

#4

Hello Alessandro,

Please add this code in X > Theme Options > CSS:

.sfm-pos-left .sfm-rollback,
.sfm-style-full .sfm-sidebar-close  {
    left: 49%;
}

Here are some related links for further reading:

Hope this helps.

#5

Thank you all.

Of course, it works.

But I can’t figure out where those classes come from. I mean, I would like to know what to look for next time I get a similar problem, to avoid bothering you all again :slight_smile: . Because those classes don’t appear on the main menu button tag.

Thank in advance.

#6

Hi there,

You can check the second link I have provided in the previous response on how to get the CSS selector.

Hope this helps.

#7

Thanks again.

I set the left value to 48.5% because it looks more center but if I switch to mobile, it moves right…

#8

Hi there,

For that, you can add some media query in the code to set the placement specifically to mobile devices like:

.sfm-pos-left .sfm-rollback,
.sfm-style-full .sfm-sidebar-close  {
    left: 49%;
}

@media (max-width: 480px) {
    .sfm-pos-left .sfm-rollback,
    .sfm-style-full .sfm-sidebar-close  {
        left: 30%;
    }
}

Please adjust the values in the code accordingly.

Hope this helps.

#9

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