Similar to Bob's post at https://www.joomshaper.com/forum/question/4077 , my custom header code I got from a post last year and at the Helix Ultimate documentation page no longer works after the latest HU 1.1.3 update.

My original code that was working for a year per the recommendations at my previous enquiry (https://archive.joomshaper.com/forums/shrink-header-menu-on-scroll-on-helix-ultimate) doesn't work any more.

I tried the recommendations at https://www.joomshaper.com/documentation/helix-framework/helixultimate/faq-how-to-do. No good.

My current custom.css file contains:

/* ========================================================================
   Set Scrolling Header in Helix Ultimate
 ========================================================================== */
#sp-header.header-sticky {height: 65px;}
#sp-header.header-sticky .sp-megamenu-parent > li > a, 
#sp-header.header-sticky .sp-megamenu-parent > li > span 
{line-height: 65px;}


/* ========================================================================
   Fix scrolling site logo in Helix Ultimate
 ========================================================================== */
#sp-header.header-sticky .logo {height: 65px;}
#sp-header.header-sticky .logo-image {
    height: 55px;
}

I simply want the header bar and logo to shrink on scroll in desktop and mobile. The menu is moving up on scroll, and the logo moves up on scroll, and scales properly. However, but the header height remains unchanged, and dropdown menus now overlap the header itself.

1. What code do I need to change to make the header height reduce properly on scroll?
2. What code do I need to add to make this work properly on mobile devices?

Thanks!