Sticky-hide-on-scroll navigation script won't work correctly on Debut Theme! Please help!

Highlighted
Shopify Partner
104 1 11

Hey guys! Maybe someone here can help me! I'm followed this guide to add a script for creating a sticky navigation header that automatically hides when scrolling down and unhides when scrolling up. It works, but for some reason. The problem is that the header does not contain the nav menu. (This might be because I used to use third party app for the menu, which I recently ditched). If I change the:

".site-header"

 on the hide-header-v2.js file and replace it with:

".site-nav"

 It will display the navigation menu, but not the rest of the header (logo and search bar). I need to somehow in the js file call both parts, I tried grabbing the ID or the class of the div containing both in the theme.liquid for the js file but got no success. I'm currently learning javascript so I'm still working around but can't manage to figure this out.

I am using Debut Theme. The scripts are designed to work with Debut theme, but I believe further customization on my store made it dysfunctional. Here's a link to the github repo where the scripts are and here's a link to my store in preview mode (won't risk going live without solving this first!)

0 Likes
Highlighted
Shopify Partner
104 1 11

Ok, I managed to solve that problem by wrapping the the site-header and the site-nav in a div with this class: .contenedor-header-nav 

I colored the background white and it works but now I have a gap at the very top of the announcement bar and I don't know how to remove it! Here's a link: https://sgccv0mntceljvdr-7442563129.shopifypreview.com (link will expire in 14 days since it is a preview link). Here I attach screenshot. Now I managed to inspect what was above with chrome's dev tools and I believe there's the desktop navigation menu hidden at the top of the viewport and that a portion is visible with the teaks, but I could not manage to solve this issue.

Capture.JPG

0 Likes