Superfly menu overlapping top content

Support
#1

Hi,

I have a sueprfly menu that is triggered at 1000px. Everything is working fine, however, the following issue:

The superfly menu cuts off the top content below 1000px. This is especially visible on certain pages listed in the secure form. Any help would be greatly appreciated. This is mostly a problem on Safari. It is not as bad on Chrome or Firefox, but it still happening a little on them. Thanks!

I’m not sure if these issues are related. Any help would be greatly appreciated! Thanks in advance!

#2

Hello There,

Thanks for writing in! By default SuperFly menu will always be fixed on top of the page. And this is the reason why it is overlapping the content. To prevent that from happening, please go to SurperFly Menu > Advanced Tab and insert this Additional CSS

@media screen and (max-width: 1018px){
  .superfly-on #sfm-mob-navbar {
    position: relative;
  }    
}

Hope this helps. Kindly let us know.

#3

Thanks for your reply! I added the code and it helped. However, I would like the menu to remain fixed. Is there a way to keep it fixed while also keeping it from overlapping the content? Also, now there is white space above and below the menu on mobile (see picture). Thanks again!

#4

Hi There,

Unfortunately, that is not possible. Making it fixed means it will always stay on a certain part of the browser regardless of other content. Now the issue on top, is because of the following CSS:

@media screen and (max-width: 1018px){
  .superfly-on #sfm-mob-navbar {
    position: relative;
  }    
}

See this: https://screencast-o-matic.com/watch/cbQvfjIxdY

#5

Thanks for the reply. Can you help me figure out how tor solve this? The code that code was provided by you to keep the menu from cutting off the content below it. How can I keep the menu from cutting content off and remove the white space above the menu on mobile? Thanks!

#6

Hi,

You can try this code instead.

@media screen and (max-width: 1018px){
  .x-root {
    margin-top: 62px;
  }    
}

Hope that helps

#7

Thank you so much! That worked for desktop, and removed the space above the menu bar on mobile. However, there is now space below the menu bar on mobile (picture attached). How can I remove that? Thanks again!

#8

Hi again,

Can you please try replacing the previous code with the following code:

@media screen and (min-width: 1019px){
  .x-root {
    margin-top: 62px !important;
  }    
}

@media screen and (max-width: 1018px){
  .x-root {
    margin-top: 0px !important;
  }    
}

Let us know how this goes!

#9

Thanks for the reply. Unfortunately, the code created more issues on desktop. Above 1018px, there is now space above the navbar. Below 1018px, the navbar is still cutting off content. Any ideas on where to go from here? Thanks again! Really appreciate your help!

#10

Hello There,

Sorry if the code did not work out. It should have been in reverse order. please update it and use this:

@media screen and (min-width: 1019px){
  .x-root {
    margin-top: 0px !important;
  }    
}

@media screen and (max-width: 1018px){
  .x-root {
    margin-top: 62px !important;
  }        
}

Please let us know if this works out for you.

#11

Thanks for the reply. I reversed the code. Now, everything looks great on desktop, but I am getting space below the navbar on mobile (please see picture). Any idea how I can resolve this? Thanks again!

#12

Hi there,

Hmmm, I’m a bit confused, do you wish to remove space both on desktop and mobile? How about just this one.

.x-root {
    margin-top: 0px !important;
}

Thanks!

#13

Thanks! Now it looks great on Chrome, but is still covering content on Safari on desktop (see picture). Any ideas? Thanks!

#14

Hi,

You can try this code instead.

@media screen and (max-width: 1018px){
  body {
    padding-top: 62px;
  }    
}

Please clear your browser cache before checking.

Thanks

#15

Sorry about all the back and forth. Thanks for your help and patience. I replaced the code, but am still having substantial issues. Now, Everything looks good on Safari desktop, but there is space below the header and above the hero image on Chrome and mobile. Any ideas how I can make it work across the board? Thanks again!

#16

Hi there,

Let’s try this one, a combination

.x-root {
    margin-top: 0px !important;
}

_::-webkit-full-page-media, _:future, :root .x-root {
    margin-top: 62px !important;
}

@media screen and (min-color-index:0) and (-webkit-min-device-pixel-ratio:0) { @media {
    .x-root { 
        margin-top: 62px !important;
    }
} }

@media not all and (min-resolution:.001dpcm) { @media {
    .x-root { 
        margin-top: 62px !important;
    }
} }

Hope this works this time :wink:

Thanks!