Sticky Header Dawn Theme (Announcement Bar + Menu Bar)

Solved

Sticky Header Dawn Theme (Announcement Bar + Menu Bar)

Alby98
Tourist
8 0 6

Hi! How can I create a sticky announcement bar? I have already implemented the code to make the menu sticky

 

Here's the store: https://prasadayoga.it/products/prasadamat

Password: prasada

 

Thank you all! Have a nice day!

Accepted Solution (1)
KetanKumar
Shopify Partner
36927 3642 11995

This is an accepted solution.

@Alby98 

add this code 

base.css file 

/* section-header */
#shopify-section-header{
  z-index: 3;
  top: 36px;
}

.shopify-section-header-sticky, #shopify-section-announcement-bar {
  position: sticky;
  top: 0;
}
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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 12 (12)

KetanKumar
Shopify Partner
36927 3642 11995

@Alby98 

grate 

yes apply same thing Announcement Bar and try if any issue let me know 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Alby98
Tourist
8 0 6

Hi! Thank you for the reply!

Can you write here the code? I don't understand what I have to do

 

Thank you!

KetanKumar
Shopify Partner
36927 3642 11995

@Alby98 

yes please share your header script code so i will 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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Alby98
Tourist
8 0 6

CSS:

#SearchDrawer {
  z-index:1001;
}

#shopify-section-header {
  position: fixed;
  z-index:1000;
  left:0;
  right:0;
  -webkit-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  -moz-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  -ms-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  -o-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  background-color: {{ settings.color_body_bg }};
}

#PageContainer {
  padding-top: 80px;
}

@media screen and (max-width: 749px) {
#PageContainer {
  padding-top: 70px;
}
}

 

 Javascript:

function headerSize() {
  var $headerHeight = $('div#shopify-section-header').outerHeight();
  $('#PageContainer').css('padding-top', $headerHeight);
}

$(window).on("load", headerSize);
$(window).on("resize", $.debounce(500, headerSize));

$(window).scroll(function() {
  scroll = $(window).scrollTop();
  if (scroll >= 1) {
    $('.site-header').css('top', '0');
  } else {
    $('.site-header').css('top', 'initial');
  }
});

 

KetanKumar
Shopify Partner
36927 3642 11995

@Alby98 

try this code

CSS:

#SearchDrawer {
  z-index:1001;
}

#shopify-section-header, #shopify-section-announcement-bar {
  position: fixed;
  z-index:1000;
  left:0;
  right:0;
  -webkit-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  -moz-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  -ms-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  -o-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  background-color: {{ settings.color_body_bg }};
}

#PageContainer {
  padding-top: 80px;
}

@media screen and (max-width: 749px) {
#PageContainer {
  padding-top: 70px;
}
}

 

Javascript:

function headerSize() {
  var $headerHeight = $('#shopify-section-header').outerHeight();
  var $headerHeight = $('#shopify-section-announcement-bar').outerHeight();
  $('#PageContainer').css('padding-top', $headerHeight);
}

$(window).on("load", headerSize);
$(window).on("resize", $.debounce(500, headerSize));

$(window).scroll(function() {
  scroll = $(window).scrollTop();
  if (scroll >= 1) {
    $('.site-header').css('top', '0');
  } else {
    $('.site-header').css('top', 'initial');
  }
});

 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Alby98
Tourist
8 0 6

Unfortunatly it doens't work.. Is it possible to solve this?

Thank you very much

KetanKumar
Shopify Partner
36927 3642 11995

@Alby98 

yes, if possible to give me theme access so i will check and let you know 

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 Partner | 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
36927 3642 11995

This is an accepted solution.

@Alby98 

add this code 

base.css file 

/* section-header */
#shopify-section-header{
  z-index: 3;
  top: 36px;
}

.shopify-section-header-sticky, #shopify-section-announcement-bar {
  position: sticky;
  top: 0;
}
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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
JH_TECH
Shopify Partner
65 5 7

Hello, 

we applied this code on our base.css file and it works as desired when scrolling down, but when we scroll up, there is a gap between the menu bar and the top of the screen. This gap is also created when we press the menu to see more options. Do you know how we can fix this?

Thank you,

Jacques Hermes team. 

Thanks in advance! • The theme used in our e-shop: Dawn. • jacqueshermes.com • Please answer us here and not to our public e-mail addresses and social media as any tech-shopify support-oriented e-mails, and messages will get deleted by staff. • Jacques Hermes Team
KetanKumar
Shopify Partner
36927 3642 11995

@JH_TECH 

oh sorry for that issue can you please share your store url.

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
JH_TECH
Shopify Partner
65 5 7

jacqueshermes.com

Thanks in advance! • The theme used in our e-shop: Dawn. • jacqueshermes.com • Please answer us here and not to our public e-mail addresses and social media as any tech-shopify support-oriented e-mails, and messages will get deleted by staff. • Jacques Hermes Team
KetanKumar
Shopify Partner
36927 3642 11995

@JH_TECH 

thanks but i can't see any issue can you please send screenshot 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing