Shrink header is impacting menu spacing

Hello! I was able to get a sticky nav working well thanks to @tuanphan and @Ziggy's work in other threads. I've got just one small snag I can't figure out. 

I have a burger menu on desktop and mobile. When the user scrolls down the page and then clicks to open the burger menu, the shrink header spacing is being applied. Screenshots attached as I'm having a hard time describing. I can't seem to isolate this in the CSS. I would be so grateful for your insight! 

page password: 140ann

Sure, can you share your website URL?

Oops! It's https://www.andasanas.com/yoga-classes

Does this help?

.header-layout-branding-center .header-title {
  margin-top:12px;
}

Thanks for looking! Unfortunately not. That code targets the entire header whereas I need to fix the spacing only on shrink.

On 4/7/2023 at 1:10 AM, mbockmaster said:

Thanks for looking! Unfortunately not. That code targets the entire header whereas I need to fix the spacing only on shrink.

Change code to this

header#header.shrink .header-title {
  margin-top:12px;
}

Thanks @tuanphan. That doesn't seem to help, perhaps I'm not explaining well. I made a super quick screen recording: https://watch.screencastify.com/v/lEWqCj4u0d0R2yOhcgLV

Thanks so much for your help!

Hi @tuanphan, sorry to be a bug! Just curious if you have any ideas to fix this issue 🙂

Oh my gosh, through so much trial and error, I was able to fix it on my own!!! I used the selectors below and gave it the same padding as the .header-announcement-bar-wrapper 🙂

.header--menu-open .shrink .header-announcement-bar-wrapper