Announcement bar stuck below the sticky header on mobile version: Venture theme

Store Design
1

Hi all,

I had implemented a code to make my header sticky for the mobile version in the venture theme. However, after implementing the code, the announcement bar is stuck behind the header.

Here is the screenshot highlighting the issue:

IMG_7810.PNG
IMG_7810.PNG1125×2436 240 KB

I actually wanted in top of the header. Here is the sample website wherein you can see exactly what I am looking for: (sohumlinen.com)

Screenshot 2021-08-07 at 1.48.25 PM.png
Screenshot 2021-08-07 at 1.48.25 PM.png766×508 137 KB

As you can see, the announcement bar is on top of the header and when someone scrolls down, the announcement bar disappears and only the header becomes sticky!

Hope someone can help me with the code to implement this.

Store- sohumretail.myshopify.com

Pass- [email removed]

2

@ChamanGarg

Add this code in theme.scss

@media only screen and (max-width: 749px){
.page-container.page-element.is-moved-by-drawer {
    margin-top: -124px;
}
}
1 Like
3

Hello @ChamanGarg

Add this code in theme.scss

@media only screen and (max-width: 749px){
.page-container.page-element.is-moved-by-drawer {
    margin-top: -124px;
}
}
1 Like
4

Hi @Kinjaldavra @Zworthkey ,

I added the code that you both had sent but after adding it the announcement bar has disappeared. Can you please check?

5

hello @ChamanGarg

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width: 425px){
 .is-moved-by-drawer {
    top: 0px !important;
}
.main-content{
	 margin-top: 0px !important;
}
}
1 Like
6

Hi @Kinjaldavra , I used the new code that you sent but it is still not working properly could you please check!