How to Align Superfly Button with Navbar (or place it in navbar manually)

[dchevalierRW]

Hi,

I’m trying to get my superfly button to align with the navbar (at the bottom of the masthead). I’d like it off to the left on it’s own.

Can someone help figure out what I need to do?

Education and Behavior

[Prasant]

Hello David,

Thanks for asking.

You can add following CSS under Pro > Theme Options > CSS:

.sfm-logo, .sfm-rollback.sfm-fixed {
    top: 13rem;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[dchevalierRW]

Thank you, a little tweeking to size, and I added a breakpoint for mobile. You guys are the best!

@media only screen and (min-width: 980px){
    .sfm-logo, .sfm-rollback.sfm-fixed {
    top: 16rem;
}
}

[thai]

Glad we were able to help

[dchevalierRW]

I got a curve ball I didn’t notice yesterday:

How can I keep the button on the page once we scroll, in the x-navbar sticky bar?

[rad]

Hi @timbuckthree,

The SuperFly toggle isn’t connected or related to fixed positioning of the theme’s header. For the reason that it’s or should a separate menu entity.

But, it has its own fixed positioning option. Please go to Admin > SuperFly Menu > Button and toggled on the BUTTON FIXED ON PAGE option. It should stay upon scrolls, but may not sync with the standard header.

Thanks!