Detached Sticky Header

Hi! 

I was wondering if anyone knows how to replicate a header like the one in this site has? https://a-realm.squarespace.com/?password=pearler

Looks like they have a simple fixed header and are applying a background and border to this selector:

.header-title-nav-wrapper

@Ziggy okay- thank you! Do you think you could help me with the code? Adding the background, color, and border options? I'm new to css! ❤️

Thanks @Ziggy This is looking great so far. Question- is there a while to manipulate the width of the border? For example I would love to extend it a little longer if possible! 

The website I'm currently working: https://accordion-fish-2rkl.squarespace.com/

password: yellow

@Ziggy actually- i figured it out using: 

.header .header-announcement-bar-wrapper {
    position: relative;
    z-index: 2;
    width: 150%;
    box-sizing: border-box;
    padding-top: 3vw;
    padding-bottom: 3vw;
    padding-left: 3vw;
    padding-right: 18vw;
    pointer-events: auto;

}

7 hours ago, kaydotjpg said:

@Ziggy actually- i figured it out using: 

Nice one!