Superfly fixed navbar issue and scrolling issues on page

[Minna]

I’m having trouble getting the navbar fixed on page, it is currently set to be fixed (to my knowledge) but it’s not. It’s scrolling down with the page. The CSS might be a bit all over the place as I’m trying to create the superfly mobile menu to show on desktop aswell as in the mobile

Also the page does not scroll smoothly, it gets stuck and does not scroll at all. I’m sharing a print screen of what it looks like too. There’s is another, inner section of the scroll page sections in the right of the browser. I suspect these issues are connected because I think it started after I changed the navbar to show on desktop aswell. (chrome)

[prakash_s]

Hello Minna,

Thanks for writing to us.

I checked your site, it seems that your home page’s 3rd sections row margin is not properly set just because of that you are getting an extra scroll bar on the page. You can create a clone of this page and then delete section 3 from the page content then check it again of the quick fix you can use custom CSS code.

Go to the Section 3—>Row—>Customize —>Element CSS

$el > .x-row-inner{
  margin:0;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[Minna]

Thanks so much, you guys are the best! That fixed it. I realized it was because I had set gap height 3rem in the rows.

Any advice on the issue I have with the (not) fixed navbar?

[nabeel]

Hey Minna,

I checked your site and the navbar is fixed on both desktop and mobile devices. A fixed navbar stays on the screen even if you scroll down. It’s also called sticky navbar. Are you trying to make it static instead? In static navbar the menu stays on top and do not appear when you scroll down.

Thanks!

[Minna]

Ah sorry my bad! Is there a css code I could use to have the navbar fixed on mobile only, on the bottom? And stay static on top of the page in desktop?

I tried this to get the mobile navbar fixed on bottom, but it overrides the rule for the desktop navbar…

    /* mobile navbar */

  @media only screen and (max-width: 980px) {
    #sfm-mob-navbar {
	bottom: 0 !important;
	top: auto !important;
	position: fixed;
    }

/* desktop navbar */
    
  @media screen and (max-width: 4000px) {
#sfm-mob-navbar {
    height: 85px;
    width: 100%;
    left: 0;
    position: static;
    padding-left: 25px;
    text-align: left;
}

[ruenel]

Hello Minna,

You have a broken CSS code. You should be using this:

/* mobile navbar */
@media only screen and (max-width: 979px) {
	#sfm-mob-navbar {
		bottom: 0 !important;
		top: auto !important;
		position: fixed;
	}
}

/* desktop navbar */    
@media screen and (min-width: 980px) {
	#sfm-mob-navbar {
	    height: 85px;
	    width: 100%;
	    left: 0;
	    position: static;
	    padding-left: 25px;
	    text-align: left;
	}
}

For more details about how you can use the @media CSS rule, please check this out:

• https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Cheers.