Fixed menu / navigation with static announcement bar (Brooklyn Theme)

[KristinaE]

I have managed to make my menu/navigation sticky. However I want the announcement bar to be static / not sticky. Can somebody help me out?

https://kpr45n3ien8nuaez-50272534682.shopifypreview.com/
PW: whopra

[KetanKumar]

@KristinaE 

Thanks 

sorry 

[KristinaE]

sorry! this should work!

https://9z26mp25pitjxi2c-50272534682.shopifypreview.com/

[KetanKumar · Accepted solution]

@KristinaE 

Great, Thanks it

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.header-wrapper.fixed-header {
    transition: all 0.9s;
    background: #000;
    transform: translateY(-42px);
}

[KristinaE]

Thank you very much! This worked on the main page. However, on the other pages such as the collection page it's not working and the menu is hiding the page title now!

[KetanKumar]

@KristinaE 

Thanks 

i have update my code can you please check again and update 

[KristinaE]

Thank you! The announcement bar is disappearing now! My only problem is that the menu (both desktop and mobile version) is still hiding part of the other pages e.g. page titles (see image attached).

https://ibb.co/zQx3qNQ
https://ibb.co/rZDzK5x

This is the code I'm using:

.header-wrapper {  position: fixed;  z-index: 1;  background-color: rgba({{ settings.color_body_bg }}, 0.0);  width: 100%;
}
.header-sticky .header-wrapper {  background-color: rgba({{ settings.color_body_bg }}, 1);  @include at-query($min, $medium) {  .logo img{    height: 60px;   }  }  .site-nav {      transition: all .3s ease, height .8s ease;   -webkit-transition: all .3s ease, height .8s ease;    -o-transition: all .3s ease, height .8s ease;    margin-top:0 !important;  }
}
.header-sticky .header-wrapper {
}

body:not(.template-index) .main-content {
	padding-top: 100px !important;
}

.template-index .fixed-header .site-header {
	background-color: #2b2b2b;
}

[KetanKumar]

@KristinaE 

Thanks for it it can more custom code may be

[KristinaE]

I added a bit of padding here, which worked for me for now!

body:not(.template-index) .main-content {
	padding-top: 150px !important;
}

[KetanKumar]

@KristinaE 

it's great Thanks