My sticky header bar isn't exactly how I want it. MInimal theme

jamesMeegan
Excursionist
47 1 11

So heres what it looks like before I made it a sticky header: 

Screen Shot 2021-09-27 at 7.37.39 AM.png

Here's what it looks like now: 

Screen Shot 2021-09-27 at 7.37.56 AM.png

 

The code I used in the theme.scss file was:

header.site-header {
position: fixed;
z-index: 999;
width: 100%;
}

Im not sure what I did wrong. I mean it is sticky but the entirety of it is not filled in with color. 

Here's the url: https://minimal-design-james.myshopify.com/

Here's the password: FoxHound422

Replies 2 (2)

dmwwebartisan
Shopify Partner
12280 2546 3694

@jamesMeegan 

You can use these CSS styles to make that changes

.header-bar {
    position: fixed;
    z-index: 999;
    width: 100%;
}
header.site-header {
    padding-top: 60px;
}

On your theme go to Edit code, then at the sidebar go to Assets -> theme.scss.liquid
and paste the code at the end of the file.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
jamesMeegan
Excursionist
47 1 11

That makes my announcement bar a sticky header instead of the line with the home, our menu, and about us nav links. I want the nav links line to be a sticky header. Should i just try and have the whole section a sticky header? When i scroll down only the announcement bar with the search comes with it.