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

[naximov]

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!

[Abdosamer · 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;
    
}

[Abdosamer]

Hi @naximov , can you share your store url?

[naximov]

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

[Abdosamer · 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;
    
}

[naximov]

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

[Abdosamer · 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;
}

[naximov]

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]

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/