Mobile Sticky Nav Bar

New Member
1 0 0

Hello, so I am trying to get a sticky nav bar and I tried to search up a code to set one up. Every code I used so far worked perfectly on a computer view but on mobile view it does not work. None of them worked or changed anything on mobile view. Could someone help me out with this? I use venture theme.

0 Likes
Astronaut
956 116 221

Hey Nil. Go to Online Store > Themes > Actions > Edit Code

Then open your "header.liquid" file in your Sections folder.

Add this to the style tags at the top:

@media screen and (max-width:750px){
  body{
  margin-top:75px;
  }
  .site-header__upper.page-width {
    position: fixed;
    top: 0;
    z-index: 2;
    background-color: black;
}
}

It's not perfect, but should point you in the right direction. Let me know if this helps.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Shopify Partner
1838 173 562

Fixes margin, hides cart icon, laurels go to Ninthony

@media only screen and (max-width: 750px) {
    body {
        margin-top:62px;
    }
    .site-header__upper.page-width {
        position: fixed;
        top: 0;
        z-index: 2;
        background: #000;
    }
    header.site-header {
        position: fixed;
        top: 0;
        z-index: 1000
    }
    .js-drawer-open .site-header__cart {
        display: none;
    }
}

Mind you, this is the CSS only patch work. The clean way would be to write this using SCSS with media mixins on their respective rules.

Greetings

I turn coffee in to code - since 1998
0 Likes

This is not working very well in the mobile version of Venture. It generates problems with the notification bar that appears when someone adds a product to cart and even with the announcement bar.  Do you know how to fix it?.  Thanks!

0 Likes

@Find-Art-Co  For a Mobile Sticky Nav Bar on Venture theme (working as we should expect) you can try this: 

1) Duplicate your theme

2) See bellow :

Paste this code at the very bottom of "theme.scss.liquid" :

@media (max-width:750px) {
	div#shopify-section-header {
		position: fixed!important;
		z-index: 2!important;
	}
	.page-element.is-transitioning {
		z-index: 0!important;
	}
	.drawer {
		transition: none!important;
	}
	.main-content {
		margin-top: 100px; // This value must equal the height of your header + average of 30px.
	}
}

 

Paste this code at the very bottom of "theme.js":

// this is to prevent odd behaviour and smooth unfolding of the menu 
$(window).on('resize', function () { var width = $(window).width(); $('div#shopify-section-header').css('max-width', width); }).resize(); /* if you're using the built-in promotional bar, this will regulate the margins, else the featured product picture
(and other pages content near the top) may be a bit hidden by the promotional bar*/ if ($(window).width() < 750) { $(function () { var promoKeyName = 'promo-' + $('#NotificationPromo').data('text'); if (!(promoKeyName in localStorage)) { $('.main-content').animate({ marginTop: '+=43px' // 43 pixels on average if your promotion bar is on one line }, 0); } }); }

 

Finally, find this piece of code inside "theme.js":

 

if (evt && $(evt.currentTarget).attr('id') === 'NotificationPromoClose') {
      if (this.isLocalStorageSupported) {
        localStorage.setItem(this.settings.promoKeyName, 'hidden');      
      }
    }

 

And replace it with this piece of code:

 

/* just as before, if you're using the built-in promotional bar, this will regulate the margins, so that when you close the promotional bar, 
the content moves back up and fills the gap */
if (evt && $(evt.currentTarget).attr('id') === 'NotificationPromoClose') { $('.main-content').animate({marginTop: '-=43px'}, 0); if (this.isLocalStorageSupported) { localStorage.setItem(this.settings.promoKeyName, 'hidden'); } }


Feel free to improve this code and share yours then. I've tried it and it does the job pretty well, but I know this can be improved in some ways (especially the hardcoded parts), maybe simplified too. 

C'est simple comme bonjour ! Ou presque.
Need some help to customize your website? Message me anytime: 5euros.com/profil/maxdesign
1 Like

@MaxDesign thank you very much to taking the time to help the community.  I did tried your solution changing the margin top values on theme.css and theme.js and it seems to work fine.....but there is something not working well:

 

When scrolling down, the link labels of the link blocks are imposing over the header. Check the attached image.  Any fix for this?. I am not a coder so I just can't find an easy solution by myself.  Thanks in advance.

 

Captura de pantalla 2019-10-13 a la(s) 9.32.02 a. m..png

 

0 Likes
Highlighted

@Find-Art-Co It has to do with some z-index property. I'm not sure which one and a guess won't be appropriate. I sent you a request to access your store, once I figure it out I'll update the above answer. 

C'est simple comme bonjour ! Ou presque.
Need some help to customize your website? Message me anytime: 5euros.com/profil/maxdesign
1 Like

Hello @MaxDesign, I see you did the job on my website. Thank you very much, it is working great!

 

I have a question: If in the future I would like to stop using this functionality I guess the only thing I had to do is to delete the coding added. Am I right?

 

Thanks a lot!

 

PS: it would be great if you teach us what you did to solve the superposition issue. So if anyone in the future has the same problem they could solve it by themselves.

0 Likes

@Find-Art-Co  You're welcome. I can't find a way to edit my precedent post. I just replaced the z-index property to 3 (instead of 2).

 

Indeed you'd have to remove the code (reverse the process), or if you want it to be easier later on, develop a checkbox button in your shopify editor to activate/deactivate this feature. That's something else.
 
Also, depending on how customized a Venture theme is, on the height of the header and the height of the promotional bar, some margins values may need to be adjusted (in the above piece of code), I'm sure this could be improved but that's the easiest copy/paste tuto I could come out with. 

 

@media (max-width:750px) {
	div#shopify-section-header {
		position: fixed!important;
		z-index: 3!important;
	}
	.page-element.is-transitioning {
		z-index: 0!important;
	}
	.drawer {
		transition: none!important;
	}
	.main-content {
		margin-top: 100px; // This value must equal the height of your header + average of 30px.
	}
}
C'est simple comme bonjour ! Ou presque.
Need some help to customize your website? Message me anytime: 5euros.com/profil/maxdesign
1 Like