Docs

[Eyoael]

Hi,

I was wondering how to make it so that the superfly button text is to the left/right of the button instead of at the bottom of the button? I found the following css in the forum:

HOME / SUPPORT CENTER / SUPERFLY BUTTON TEXT TO LEFT OF ICON
October 18, 2016 at 2:18 pm #1221244

Satchel L

I am switching from an older menu plugin to superfly

I want the menu text to be to the left of my hamburger menu instead of under.Like you see on this page: justbreathecf.org

I tried the following code and it’s not working

.sfm-navicon-button:before {
content: “MENU”;
position: absolute;
top: 0;
bottom: 0;
color: #fff;
font-weight: 600;
font-family: “Gotham Cond SSm A”, “Gotham Cond SSm B”, “Lato”;
}

.x-nav__desktop .superside__toggler:before {
left: -200%;
font-size: 28px;
line-height: 35px;
letter-spacing:1px;
}
.x-nav__mobile .superside__toggler:before {
left: -1px;
font-size: 12px;
line-height: 132px;
}

The css is not working correctly, the person who wrote this said that they had to apply i few more lines for this to work but didn’t specify what those were, can you help me?

Thanks

[Rahul]

Hey There,

Thanks for writing in!

Regretfully, at this time I am not entirely certain what it is you’re trying to do.
If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do. We’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks for understanding!

[Eyoael]

Hi,

I want my superfly menu to text to look like the following exampel page http://justbreathecf.org/. You can see that the button text is to the left of the button, my superfly menu button text appears below the superfly button.

Thanks

[Joao]

Thanks for writing in! 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.

[Eyoael]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for providing the information. Do you want something like this?

If that is the case, you can add this under Custom > CSS in the Customizer.

body .sfm-navicon-button:after {
    top: 20%;
    left: 50%;
}

We would love to know if this would work for you.

[Eyoael]

Hi,

Great, yes this is what i wanted :).

Thanks

[Eyoael]

Hi,

If i want to place the button text to be seen on the left side of the button do i just change the css left:50% to right 50% or?

Thanks

[Rue Nel]

Hello There,

If you want to display on the left side, you may use this code:

body .sfm-navicon-button:after {
    top: 20%;
    right: 50%;
}

Hope this helps.

[Eyoael]

Hi Rue,

i tried that but the text just ends up in the middle of the button instead of to the left of the button for some reason.

[Lely]

Hi There,

Please update to this:

body .sfm-navicon-button:after {
    top: 20%;
    left: -84px;
}

See this:http://screencast-o-matic.com/watch/cbV06VQKw4

Hope this helps.

[Eyoael]

Hi,

As always you guys are great help :).

Thanks

[Lely]

You’re welcome!

Cheers!

[Eyoael]

Hi,

I have one last question on this subject, how can make it so that the text is visibile on mobile phones? I have looked at the superfly settings and i can’t find a way to make this happen, ca you guys help?

Thanks

[Eyoael]

And also how can make my logo to appear on the left side of the screen. I have placed a logo image in customizer but it doesn’t show.

Thanks

[Author]

Posts