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

[jamesMeegan]

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

Here's what it looks like now: 

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

[dmwwebartisan]

@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.

[jamesMeegan]

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.