Uber Menu responsive and Superfly menu problem

Support
#1

I’m using Superfly for my menu on mobile and Uber Menu for my menu up to the 767px breakpoint. I’ve worked out how to hide on desktop via this code

/* SUPERFLY MENU */

/* Portrait and Landscape */

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 5000px) {
.superfly-on #sfm-sidebar {
display: none !important;
}
}

And have tried to hide uber menu via

@media only screen 
  and (max-width: 767px) {
.x-navbar .ubermenu {
display: none !important;
}
}

but it doesn’t work? I’ve tried just using .x-navbar as well but still no luck.

Also one other problem

When I open the superfly menu on a desktop that has a browser window width of less than 767px it just doesn’t open at all. When I click on the hamburger icon this happens

So no menu is showing at all. Any help would be great.

Thanks

EDIT: Also because of Superfly for some reason there was a

.sfm-no-mobile.sfm-pos-right.sfm-bar body, .sfm-no-mobile.sfm-pos-right.sfm-bar #wpadminbar {
  
  padding-right:100px !important;
}

causing my site to be offset by 100px so i’ve had to enter

.sfm-no-mobile.sfm-pos-right.sfm-bar body, .sfm-no-mobile.sfm-pos-right.sfm-bar #wpadminbar {
  
  padding-right:0px !important;
}

into the custom CSS. What is this code above changing?

UberMenu for desktop and SuperFly Menu for mobile version
#2

Hi there,

Thanks for writing in.

There are many tangled CSS why it’s not working, example, the above CSS aren’t working because of these

.x-navbar #ubermenu-main-7-primary-2 {
    display: inline !important;
}

.sfm-mob-nav .sfm-rollback {
    display: none !important;
}

Could you try removing all other CSS first and try your preferred one? But please back them first.

Thanks!

#3

So you want me to remove all my CSS for both my uber and superfly menu?

.x-navbar #ubermenu-main-7-primary-2 {
display: inline !important;
}

This is used to make my menu items display inline, and when I delete it, it all looks messed up

#4

Hi,

You need to add all your @media code at the very bottom of your Global CSS Code
and it needs to be in correct order.

/* SUPERFLY MENU */

/* Portrait and Landscape */

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 5000px) {
        .superfly-on #sfm-sidebar {
              display: none !important;
         }
}


@media only screen 
  and (max-width: 767px) {
     .x-navbar .ubermenu {
           display: none !important;
    }
}

That way, it will override all codes before it.

Hope this helps.

#5

Hi Paul

It still doesn’t work when using .x-navbar .ubermenu but it does work when I use .x-navbar to hide the whole navbar.

However when using Superfly on a desktop it just doesn’t work, I posted the screenshot above but i’ll post it again

Thanks

#6

Hello There,

The result of the css code will not be noticeable when resizing desktop browsers. You will have to check it on an actual devices. To make sure that it can be previewed in desktops, please have it updated to this code:

@media only screen 
  and (min-width: 768px) 
  and (max-width: 5000px) {
        .superfly-on #sfm-sidebar {
              display: none !important;
         }
}

To know the difference between width and device-width, please check it here:

#7

Hi RueNel

That works after I changed the menu type in superfly as it was still happening even with the above code but the X is duplicated in the menus?

Fixed with this code, looks like it was left over from the sidebar I think

.sfm-pos-right .sfm-sidebar-close{
  display: none;

}

Also i’m trying to change the colour of the hamburger, I can change it in the Superfly settings but I can’t seem to change the hover colour? I doubt it’s working because of the :before:hover etc. but I can’t seem to figure it out.

#sfm-mob-navbar .sfm-navicon:hover {
  background: #5197e6;
}

#sfm-mob-navbar .sfm-navicon:before:hover {
  background: #5197e6;
}

#sfm-mob-navbar .sfm-navicon:after:hover {
  background: #5197e6;
}
#8

Hi there,

Please try this one,

.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: #5197e6;
}

Thanks!

#9

That works great to change the main colour, but i’m looking to change the hover colour of the hamburger icon rather than the main.

#10

Hi,

In that case, you can change the code to this.


#sfm-mob-navbar:hover .sfm-navicon, 
#sfm-mob-navbar:hover .sfm-navicon:after, 
#sfm-mob-navbar:hover .sfm-navicon:before {
    background-color: #5197e6;
}

Hope that helps

#11

Thanks very much Paul, that works great

#12

You’re welcome!

#13

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