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

Solved
KristinaE
Excursionist
33 0 19

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
Shopify Partner
14323 1665 5155

@KristinaE 

Thanks 

sorry 

KetanKumar_0-1610769613199.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
14323 1665 5155

This is an 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);
}

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KristinaE
Excursionist
33 0 19

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
Shopify Partner
14323 1665 5155

@KristinaE 

Thanks 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KristinaE
Excursionist
33 0 19

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;
}




0 Likes
KetanKumar
Shopify Partner
14323 1665 5155

@KristinaE 

Thanks for it it can more custom code may be

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KristinaE
Excursionist
33 0 19

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

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

 

KetanKumar
Shopify Partner
14323 1665 5155

@KristinaE 

it's great Thanks 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes