Superfly menu to be within the set width

Support
#6

Hi there,

Please try min-width instead of max-width, your @media basically apply that CSS to 800px and below where you said it’s not working :slight_smile:

Thanks!

#7

Thank you for this - in the end I kept with the Max-Width and got the menu moving. But this method is very clunky and involes a lot of css. Also it stops moving the menu when the screen is less than 360px in width. Is there a better way of doing this?? Thank you

@media only screen and (max-width : 1100px) { 
 .sfm-pos-right .sfm-rollback {
    right: calc(53% - 515px) !important;
}
}

@media only screen and (max-width : 1060px) { 
 .sfm-pos-right .sfm-rollback {
    right: calc(56% - 515px) !important;
}
}

@media only screen and (max-width : 1020px) { 
 .sfm-pos-right .sfm-rollback {
    right: calc(60% - 515px) !important;
}
}

@media only screen and (max-width : 980px) { 
 .sfm-pos-right .sfm-rollback {
    right: calc(63% - 515px) !important;
}
}

@media only screen and (max-width : 940px) { 
 .sfm-pos-right .sfm-rollback {
    right: calc(66% - 515px) !important;
}
}

@media only screen and (max-width : 900px) { 
 .sfm-pos-right .sfm-rollback {
    right: calc(70% - 515px) !important;
}
}

@media only screen and (max-width : 860px) { 
 .sfm-pos-right .sfm-rollback {
    right: calc(73% - 515px) !important;
}
}

@media only screen and (max-width : 820px) { 
 .sfm-pos-right .sfm-rollback {
    right: calc(76% - 515px) !important;
}
}

@media only screen and (max-width : 780px) { 
 .sfm-pos-right .sfm-rollback {
    right: calc(79% - 515px) !important;
}
}

@media only screen and (max-width : 740px) { 
 .sfm-pos-right .sfm-rollback {
    right: calc(82% - 515px) !important;
}
}

@media only screen and (max-width : 700px) { 
 .sfm-pos-right .sfm-rollback {
    right: calc(85% - 515px) !important;
}
}

@media only screen and (max-width : 660px) { 
 .sfm-pos-right .sfm-rollback {
    right: calc(90% - 515px) !important;
}
}

@media only screen and (max-width : 620px) { 
 .sfm-pos-right .sfm-rollback {
    right: calc(95% - 515px) !important;
}
}

@media only screen and (max-width : 580px) { 
 .sfm-pos-right .sfm-rollback {
    right: calc(100% - 515px) !important;
}
}

@media only screen and (max-width : 540px) { 
 .sfm-pos-right .sfm-rollback {
    right: calc(110% - 515px) !important;
}
}

@media only screen and (max-width : 500px) { 
 .sfm-pos-right .sfm-rollback {
    right: calc(116% - 515px) !important;
}
}

@media only screen and (max-width : 460px) { 
 .sfm-pos-right .sfm-rollback {
    right: calc(125% - 515px) !important;
}
}

@media only screen and (max-width : 420px) { 
 .sfm-pos-right .sfm-rollback {
    right: calc(130% - 515px) !important;
}
}

@media only screen and (max-width : 380px) { 
 .sfm-pos-right .sfm-rollback {
    right: calc(137% - 515px) !important;
}
}

@media only screen and (max-width : 340px) { 
 .sfm-pos-right .sfm-rollback {
    right: calc(141% - 515px) !important;
}
}

@media only screen and (max-width : 300px) { 
 .sfm-pos-right .sfm-rollback {
    right: calc(146% - 515px) !important;
}
}

@media only screen and (max-width : 260px) { 
 .sfm-pos-right .sfm-rollback {
    right: calc(151% - 515px) !important;
}
}
#8

Hi,

Please remove all css code pertaining to this.

Then add this in X > Launch > Options > JS

jQuery(function($) {
    $( ".sfm-pos-right .sfm-rollback" ).appendTo( ".x-navbar .x-container" );
});

Then add this in X > Launch > Options > CSS

.sfm-navicon-button {
    top: 20px !important;
}

Hope that hepls.

#9

AMAZING! This works so well thank you very much!

#10

You’re most welcome!

#11

I have followed this post but canot see the burger menu when im on a small screen can you help please. url www.lexbee.com

#12

Hi there,

Please enable the Show on Mobile option.

Hope this helps.

#13

No its not working…

#14

Hi There,

Try adding this CSS in Lexbee [ X > Launch > Options > CSS ]

@media(max-width:1100px){
    .sfm-pos-right .sfm-rollback{
        right: 50px !important;
    }
}

Hope this helps.

#15

Same thing…

#16

Hi,

It’s because of this code that its not visible.

/* Superfly menu contained inside the width of the page */
.sfm-pos-right .sfm-rollback {
left: auto;
right: calc(50% - 535px) !important;
}

Please remove it in your Custom CSS

Thanks

#17

When i remove this code, the burger menu is not contained inside the width of the box layout.

#18

/* Superfly menu contained inside the width of the page */
.sfm-pos-right .sfm-rollback {
left: auto;
right: calc(50% - 535px) !important;
}

I meant this code…

#19

Hi there,

Replace that code with this one:

.sfm-pos-right .sfm-rollback {
    left: auto;
    right: calc(50% - 535px) !important;
}

@media (max-width: 1200px) {
	html.sfm-pos-right body .sfm-rollback {
		right: 5% !important;
	}
}

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

#20

It worked Thank You!

#21

You’re most welcome.

#22

Hi,

I noticed that the menu appears on the reduced size screen on desktop but on my iphone the burger menu is bit present.

here is the desktop view…

#23

Hi there,

Please try to add this code as well:

@media (max-width: 767px) {
    .sfm-pos-right .sfm-rollback {
        right: 20px !important;
    }
}

Hope this helps.

#24

It is now visible but way off to the right of the screen. I have to pan left to see it.

#25

Hi there,

We will need to check the case by accessing your website and do the test by adding the CSS code ourselves. But the problem is that the Secure Note feature of the topic is visible to the original poster of this topic. Kindly open up a new thread and give the detailed information and URL/User/Pass of your WordPress dashboard using Secure Note to follow up.

Thank you.