Superfly menu to be within the set width

Support
#1

Good afternoon,

first I am using the latest version of X theme and Superfly.

For the superfly menu I have set the design to ‘full screen’ but by default the button to active the button is on the far right.
On some sites this would look find but the site has a max width of 1030 so it looks broken being stuck outside that area.

How can this be fixed??

Thank you
Jason

#2

Hello,

Thank you 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.

#3

Good morning John and thank you for the reply

I have added the login details of this site to the secure notes in the first post. Login and visit the site (which is in development)

#4

Hi,

To contain it within 1050 max width, you can add the code below in X > Launch > Options > CSS

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

.sfm-navicon-button {
    right: 0 !important;
}

Hope that helps.

#5

Good morning Paul and thank you for the update,

for desktops that is fine but as the screen goes down to around 800px in width the button gets lost and you cannot navigate.

I tried to add this but it ignores it:

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

please advise and thank you

#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!