[Venture Theme] Making the header on mobile sticky

Solved
Excursionist
36 2 4

Hello, everyone!

 

Here's a link to our website: https://www.gainexpress.com/

 

I wanted to ask if it was possible to make the header menu we have on mobile devices sticky.

 

If it is, got any clue how to do it?

 

Any help would be appreciated.

Email: ela.v.tsm@gmail.com
0 Likes
Shopify Partner
917 129 123

 

Hello 

 

@media screen and (max-width: 425px) {
header.site-header {
position:fixed;
}
.is-moved-by-drawer{
position: relative;
top: 93px;
}

}

 

 

Want to modify or custom changes on store hire us .
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
0 Likes
Highlighted
Excursionist
36 2 4

Hi there, @Pallavi !

 

Here's a preview link, since I'm testing this out first: https://ff2cxb6ily73k07o-3935153.shopifypreview.com/

 

Your solution kind of worked, but it looks like this on mobile:Screenshot (29).png

The header now blocks the banner. Any idea how to adjust that?

Email: ela.v.tsm@gmail.com
0 Likes
Shopify Expert
63 9 11

hi @Ela_V_TSM 

 

Please don't edit in theme.scss file . if any error in there your whole site structured  will be broken. for better practice you need to create another custom.scss file in "assets" folder and assign in theme.liquid file and the other way we describe below . Which is add style tag before closing </head> tag .

 

If you want sticky header in index page then you add below css in before closing </head> tag 

 

<style>
@media screen and (max-width: 425px) {
.template-index{ header.site-header { position: fixed; } .main-content{ margin-top: 120px; }
} }
</style>

For all page you need to add below style 

<style>
@media screen and (max-width: 425px) {

header.site-header {
    position: fixed;
}
.main-content{
    margin-top: 120px;
}
}

</style>

Here the screenshot 

a.png

 

Thank you 

silverclouding.com

0 Likes
Excursionist
36 2 4

Hi, @Silverclouding !

 

I've tried adding it to my theme.scss.liquid file and it did work, but it's kind of inconvenient since you wanted me to add all that to the other pages.

 

Thanks for the suggestion though!

Email: ela.v.tsm@gmail.com
0 Likes
Shopify Expert
63 9 11

hi @Ela_V_TSM 

 

Is It effect in all page ? is that you want ?

 

Thanks.

0 Likes

Success.

Shopify Expert
63 9 11

hi @Ela_V_TSM 

 

For all pages means product page , collection page , cart page , home page 

Please add below code in theme.liquid before closing </head> tag .

<style>
@media screen and (max-width: 425px) {

header.site-header {
    position: fixed;
}
.main-content{
    margin-top: 120px;
}
}

</style>

We paste this code before in above replay .

Thank you

If its helpful to you please mark as accept solution.

1 Like
Excursionist
36 2 4

Hi, @Silverclouding .

 

I put inside my theme.liquid file, and it worked. Thanks!

Email: ela.v.tsm@gmail.com
1 Like
Shopify Expert
63 9 11

hi @Ela_V_TSM 

 

We are happy to solve your problem.

 

Thanks 

SilverClouding team :)

 

0 Likes
Excursionist
29 0 0

Hi, I tried this & it does not work. It removes the nav from in front and puts it behind everything that is scrolling. I have the same theme. (Venture)

0 Likes