How To Shrink Menu Header On Scroll With HU 2.X
Allen
Hi,
I've learned that my header and header logo no longer shrink on scroll after upgrading to HU 2.x from 1.1.4. I had implemented CSS code per the archived forum at https://archive.joomshaper.com/forums/shrink-header-menu-on-scroll-on-helix-ultimate, but perhaps this code needs to be modified?
Here's the site where the header should animate and shrink on scroll: https://www.certifiedinfosec.com/.
It's probably now an easy point-and-click configuration, but I can't find it.
Regards,
Allen
Ariba
Accepted AnswerHello
Thank you for your query.
The CSS rules shared in your mentioned post should still work. Could you kindly share your admin access? Use the hidden mode to share the log in credentials, please. And please let me know where did you put those custom CSS codes.
Allen
Accepted AnswerI checked my custom.css file and found that I had removed the code.
I went back in and inserted this into the custom.css file at /templates/shaper_helixultimate/css/custom.css
/* ========================================================================
Shrink Navebar on scroll for Helix Ultimate
========================================================================== */
#sp-header.header-sticky {height: 65px; background: rgba(255,255,255,0.8);}
#sp-header.header-sticky .sp-megamenu-parent > li > a,
#sp-header.header-sticky .sp-megamenu-parent > li > span
{line-height: 65px;}
/* ========================================================================
Shrink logo on scroll for Helix Ultimate
========================================================================== */
#sp-header.header-sticky .logo {height: 65px;}Now I get resizing again, but the page now scrolls over the navbar, and I lost the smooth animation of the sticky header. Please see hidden content for login details.