Solved

Studio theme - sticky announcement bar

naximov
Tourist
8 0 2

Hi,

 

I need to make the announcement bar sticky on all pages, above  the header menu (already sticky). Tried all online solutions but nothing has worked. Any advice would be much appreciated!

Accepted Solutions (2)
Abdosamer
Shopify Partner
821 146 161

This is an accepted solution.

@naximov , go to base.css and add the following code:

sticky-header.header-wrapper.color-background-1.gradient.header-wrapper--border-bottom {
    margin-top: 3.8rem !important;
}


.utility-bar.color-inverse.gradient.utility-bar--bottom-border {
    position: fixed !important;
    width: 100% !important;
    height: 4rem !important;
    
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio

View solution in original post

Abdosamer
Shopify Partner
821 146 161

This is an accepted solution.

@naximov , Add this code to base.css :

header.header.header--middle-left.header--mobile-center.page-width.header--has-menu.header--has-social {
    margin-top: 3.8rem !important;
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio

View solution in original post

Replies 6 (6)

Abdosamer
Shopify Partner
821 146 161

Hi @naximov , can you share your store url?

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio
naximov
Tourist
8 0 2
Abdosamer
Shopify Partner
821 146 161

This is an accepted solution.

@naximov , go to base.css and add the following code:

sticky-header.header-wrapper.color-background-1.gradient.header-wrapper--border-bottom {
    margin-top: 3.8rem !important;
}


.utility-bar.color-inverse.gradient.utility-bar--bottom-border {
    position: fixed !important;
    width: 100% !important;
    height: 4rem !important;
    
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio
naximov
Tourist
8 0 2

thanks - that worked but the header is now partially obstructed by the announcement bar. See the site

Abdosamer
Shopify Partner
821 146 161

This is an accepted solution.

@naximov , Add this code to base.css :

header.header.header--middle-left.header--mobile-center.page-width.header--has-menu.header--has-social {
    margin-top: 3.8rem !important;
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio
naximov
Tourist
8 0 2

This worked! Can you advise how I can center the header menu? When viewing the site full screen, the announcement text is centered, but the header menu appears off to the left?

 

https://7dfb70-3.myshopify.com/