Superfly and uber menu help

Support
#1

I wish to use the uber menu for desktops and the fly menu for tablets,+smartphones .
I have seen this theme . But i am lost in it . I have tried it and it does not work . Could be possible to give me the steps in order to do it ? Thanks

UberMenu for desktop and SuperFly Menu for mobile version
#2

Hi there,

Would you mind providing the link to the site that you are working on so that we can check it?

Thank you.

#3

of course here you have

#4

Hi there,

Please try this code in the custom CSS:

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 5000px) {
        #shiftnav-toggle-main {
              display: none !important;
         }
}


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

    #shiftnav-toggle-main {
        display: block !important;
    }
}

Hope this helps.

#5

OK but i wish to use the superfly menu not the shiftnav menu . I was just trying to see how the shiftnav works . thanks

#6

Hi there,

Let me see if I understand correctly. You want to Hide the Ubermenu on mobile devices and Hide Superfly on Desktop devices.

If that is the case for the Ubermenu you will need to go to the responsive options and disable it for mobile:

For the SuperFly menu please add the CSS code below to X > Launch > Options > CSS:

@media (min-width: 768px) {
	.sfm-rollback {
		display: none !important;
	}   
}

I see some cache and minification plugins that you use. Please purge the cache and disable that plugin to make sure you have the latest result.

Thank you.

#7

@christopher.amirian Thank you ,Christopher ! It seems logic I am going to try it in the next few hours. By the way , I would ask you something about them .Could be possible to add an exceptional page with his ID where the uber menu must be hiden and the unique visible menu for desktops and smartphones would be the superfly -> Desktops and mobiles . Meanwhile for the rest of the pages the ubermenu works only for desktops and superfly for the mobiles ( following your previous advice ) If it can not be done , and you have some advice in mind , any information would be useful . Thanks !

#8

Hey @Borislav.VD,

There is no option for that but you can hide UberMenu on specific page by prepending the page class to UberMenu classes like this.

.page-id-532 .ubermenu-main,
.page-id-532 .ubermenu-responsive-toggle {
    display: none;
}

532 is your home page. Here’s how to get the ID for other pages.

Thanks.

#9

Thanks @christian_y
And can i customize this to a special Id pages I mean if my webpage have 10 pages , 9 of them would have it active meanwhile 1 would have superfly for both–> Desktops and smartphones . Could be done in this way?

#10

Hi There,

We can include page ID on the CSS like the previous suggestion in ubermenu:

@media (min-width: 768px) { /*Hide superfly on desktop screen of homepage only*/
.page-id-532 .sfm-rollback {
display: none !important;
} 
}

Let say you want to hide it on the entire site for desktop screen except 2 pages:

@media (min-width: 768px) { 
.sfm-rollback { /*Hide it by default on the entire site*/
display: none !important;
} 
.page-id-532 .sfm-rollback,
.page-id-960 .sfm-rollback { /*Override that first CSS and show it on home and formentera page */
   display: block !important;
} 
}

Hope this helps.

#11

ok great it works . And which is the css in order to hide the uber menu on the entire site except some of them (for mobile devices only)

#12

Hi there,

Glad it works, and may I know which some of them? I need to see it first as we need the selector for those specific items.

Thanks.

#13

Good morning ,@Rad ! I wish to know which is the code and give me an example with ID number page . After that i am going to change the id of the pages , not worry about that . thanks

#14

Hey @Borislav.VD,

@Lely provided the code previously to

To hide on mobile, you change this (min-width: 768px) to max-width (max-width: 768px).

To learn more how media query works, please see https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Thanks.

#15

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