How to make navigation bar/menu to following you when scrolling on mobile - Venture theme

Highlighted
New Member
20 0 0

Hi friends,

Please, help me to make the navigation bar to follow users when they are scrolling on mobile version. Now they have to return.on te top, this is very annoying.

This is my site - www.shopfanzone.com

Thanks!

0 Likes
Highlighted
Excursionist
39 0 4

Hello,

You can try to add this code to your store style css file.

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    header.site-header {
        position: fixed;
        top: 0;
        z-index: 1000;
    }
}

 

Increase your social traffic and boost sale with https://social-locker.inspius.io
0 Likes
Highlighted
New Member
20 0 0

Dear David,

You are Genius! Thank you very much!

It is working perfectly!

Thank you one more time :)

0 Likes
Highlighted
New Member
20 0 0

David, now appears another problem.

The slider in mobile version is not visible, its cut off.

Do you know how to repair this too?

0 Likes
Highlighted
Excursionist
39 0 4

Yes i saw it please update the code like this:

@media only screen and (max-width: 768px) {
    header.site-header {
        position: fixed;
        top: 0;
        z-index: 1000
    }
    #shopify-section-slideshow {
    	padding-top: 76px;
	}
}

 

Increase your social traffic and boost sale with https://social-locker.inspius.io
0 Likes
Highlighted
New Member
20 0 0

It works perfect now. Thank you, David :) You are the man! :)))

0 Likes
Highlighted
Excursionist
39 0 4

You are welcome hehe

Increase your social traffic and boost sale with https://social-locker.inspius.io
Highlighted
New Member
2 0 0

Thank you so much for this code.
Been battling and finally found it!
Love my client's website now :)

0 Likes
Highlighted
New Member
1 0 1

----UPDATE AT THE END----

Thank you for this! I am having two small challenges:

1) When I add this bit of CSS, I lose the "X" to close the slide-out menu on mobile.  Anyone else having this happen? It's not a huge deal since clicking anywhere outside of the menu will close it (even without the designated "X").

2) On product pages, the page is beginning behind the header/menu instead of starting below it (as was happening with the slider and corrected via CSS).  I wonder if it can be corrected for all pages, or if CSS will need to be written for every single page in the site (product pages, collection pages, contact page, location pages, blog pages, etc.). 

I appreciate any tips! Thanks again!

------------

UPDATE

I think I found the css to make this happen (so far so good, I'll update if it's not quite right after more content and pages are added):

@media only screen and (max-width: 768px) {
    header.site-header {
        position: fixed;
        top: 0;
        z-index: 1000
    }
     .page-container {
          padding-top: 75px;
    }
}

@media only screen and (min-width: 769px) {
    header.site-header {
        position: fixed;
        top: 0;
          width: 100%;
        z-index: 1000;
    }
    .page-container {
          padding-top: 170px;
    }
}

Highlighted
Excursionist
15 0 6

Hey Everyone!

We recently implemented a sticky nav bar on the Debut theme that will auto-hide on scroll down and re-appear on scroll up. It's really simple, and we hope it will be helpful to some of you!

Instructions here.

Not all pea protein powders are equal. Learn more at JustPea.com.
0 Likes