Re: Studio theme - sticky announcement bar

Solved

How can I make the announcement bar sticky in Studio theme?

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
836 149 169

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
My work

View solution in original post

Abdosamer
Shopify Partner
836 149 169

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
My work

View solution in original post

Replies 7 (7)

Abdosamer
Shopify Partner
836 149 169

Hi @naximov , can you share your store url?

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
naximov
Tourist
8 0 2
Abdosamer
Shopify Partner
836 149 169

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
My work
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
836 149 169

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
My work
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/

maylijewels
New Member
8 0 0

I really cannot get my announcement bar to stick. Not can I find the base.css I dont seem to have it?

https://mayli-jewels.com/