Docs

[Michael B]

Hello dear Themeco support!

Before bothering you with my questions I want to say thanks for X and the latest update! I really like the integration of Superfly. It has great potential but I have a few questions regarding this new addon:

1.: Is there a way to make the menu icon of Superfly appear after / below the masthead? I have set up a full screen revolution slider above masthead and I would like the menu icon to appear only after the user has scrolled past that slider or clicked the scroll bottom anchor.

2.: How can I customize Superfly´s navbar for mobiles? I need the navbar for mobiles to have a different background color and menu icon color than the desktop version. Also, the mobile navbar displays the identity/top-image/logo of the desktop version menu by default. How can I change that to a basic line of text on mobile? I guess I could achieve these things by using two separate Superfly menus on desktop and mobile, but maybe there´s some CSS available to customize the mobile look of the Superfly menu…

[Rupok]

Hi there,

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.

[Michael B]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for the URL.

#1. I have checked the possibility but it won’t be possible usually. You might be able to achieve this but it will behave unusual and won’t be responsive for all devices.

#2. You can add your CSS for mobile devices using media query :

@media only screen and (max-width: 480px) {
#sfm-sidebar.sfm-compact .sfm-scroll-wrapper {
  background: #f54;
}
}

Let’s change the CSS and add your own CSS within the media query.

Cheers!

[Michael B]

Hi Rupok,

thanks for the effort, but unfortunately this code didn´t change anything. Any other ideas?

[Christopher]

Hi there,

Please try this code:

@media (max-width780px){
#sfm-mob-navbar .sfm-navicon, .sfm-label-metro .sfm-navicon, #sfm-mob-navbar .sfm-navicon, .sfm-label-metro .sfm-navicon:after, #sfm-mob-navbar .sfm-navicon:after, .sfm-label-metro .sfm-navicon:before, #sfm-mob-navbar .sfm-navicon:before {
    background-color: red;
}
#sfm-mob-navbar {
    background-color: #fff;
}
}

Hope it helps.

[Michael B]

Hi Christopher,

thanks for your suggestion. Unfortunately, mobile navbar is still red. I tried fiddling around with the codes given by you and Rupak to a certain extent but nothing really changes. Also tried adding these snippets in Superfly´s own “advanced” tab for CSS and under Customizer>Custom>CSS. Doesn´t really make a difference, none of the options work. Seems that the Superfly menu is somewhat resistant to CSS customization 🙂

[Rad]

Hi there,

Maybe SupoerFly’s CSS has greater priorities. To override that, let’s add !important;

@media (max-width780px){
#sfm-mob-navbar .sfm-navicon, .sfm-label-metro .sfm-navicon, #sfm-mob-navbar .sfm-navicon, .sfm-label-metro .sfm-navicon:after, #sfm-mob-navbar .sfm-navicon:after, .sfm-label-metro .sfm-navicon:before, #sfm-mob-navbar .sfm-navicon:before {
    background-color: red !important;
}
#sfm-mob-navbar {
    background-color: #fff !important;
}
}

Thanks!

[Michael B]

That still did not do the trick.

But nevermind, I dropped the idea of having a custom mobile navbar. Now I am going with the hamburger button on mobile as well and that´s fine.

[Joao]

Hi Michael,

Thanks for letting us know.

Please reach us if you need help with anything else.

Joao

[Author]

Posts