Docs

[mahmoud237]

I want to replace default mobile navbar with superfly … I tried to make it but superfly doesn’t appear at all

Thanks

[Rue Nel]

Hello There,

Thanks for writing in! To assist you better with this issue, would you mind providing us the url of your site with login credentials, so we can take a closer look? 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.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[mahmoud237]

This reply has been marked as private.

[Nico]

Hi There,

I would like to confirm first if you have already follow or used the link below as guide,

https://community.theme.co/kb/integrated-plugins-superfly/

If not, would mind checking if you missed something upon using or installing superfly.

Let us know how it goes.

Thanks.

[mahmoud237]

Yes, I checked this link . The navbar worked now but only on my WordPress not online … I don’t know why ?

I need to make it online in mobile only and remove the standard mobile menu .

[Rad]

Hi there,

Would you mind providing some details about it? Which WordPress and which is not online? Is it staging?

Make sure that your changes are properly pushed online and have your cache cleared before testing.

Thanks!

[mahmoud237]

OK it’s done .. the problem was from caching as you said

Now I want to hide the default X menu on mobile view .. How can I do that … I searched on the community but I didn’t found the right code

[Thai]

Hi There,

To hide the mobile navbar, please add the following CSS under Customizer > Custom > Global CSS:

.x-btn-navbar,
.x-nav-wrap.mobile {
    display: none !important;
}

Hope it helps 🙂

[mahmoud237]

Thanks but it didn’t work for me

[mahmoud237]

Also I need to know the equivalent code for this in super fly

.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a

[Thai]

Thanks but it didn’t work for me

Please remove this string under Custom CSS:

*/ == navbar mobile remove ==*/

Also I need to know the equivalent code for this in super fly

Could you please activate the SuperFly plugin again?

Thanks.

[mahmoud237]

I managed to remove mobile navbar using this code

@media (max-width: 980px){
    .x-navbar {
        display:none;
    }

what I need now is to hide the superfly menu on screens above 980 px

[Thai]

Hi There,

Please try with this:

@media (min-width: 980px){
    .sfm-rollback,
    #sfm-sidebar {
        display: none;
    }
}

Hope it helps 🙂

[mahmoud237]

Thanks a lot it worked .. I need some more modification .

1-how can I edit the logo size on superfly

2- I add icon near li items using this code .. it worked on hover but I want it to be active on current page also .

#sfm-sidebar .sfm-menu li:hover a   { 
         background-color: transparent;
    color: #fff;
    transition: all 0.5s linear;
    background: url( http://www.juicedapps.com/wp-content/uploads/2016/08/NAV_SELECTOR.png ) no-repeat;
    background-size: auto 70%;
    background-position: left;
}

[Thai]

Hi There,

Please try with this CSS:

.sfm-logo > a > img {
    max-width: 80px;
    height: auto;
}
#sfm-sidebar .sfm-menu li.sfm-active-class a,
#sfm-sidebar .sfm-menu li:hover a  {
    background-color: transparent;
    color: #fff;
    transition: all 0.5s linear;
    background: url(http://www.juicedapps.com/wp-content/uploads/2016/08/NAV_SELECTOR.png) no-repeat;
    background-size: auto 70%;
    background-position: left;
}

Hope it helps 🙂

[Author]

Posts