I want my entire top container with my logo link and my responsive nav to appear static and stay on top (and disappear) when scrolling down. But then show back up on top of the screen (and be "fixed") anytime scroll-up is used.
Scroll-down makes it go away; scroll-up makes it appear again.
I am not a good coder and certainly can't write javascript. But I found this script online and put it in my footer. I gave the main container an ID (#topbar in this case) and on Desktop sizes the part with my logo worked but the nav didn't. So I studied the js and figured out how to add a line for each action that would control the sub container the nav is in (#topbar-responsive) and now it all works on Desktop sizes.
But it doesn't work on mobile. I built this menu by modifying a CC Component, btw.
Also.... it does affect the mobile menu. It makes the drop down (the nav links) partially hidden because of how I had to do a -32 top margin (of #topbar-responsive) to make it work for Desktop.
I tried to give an ID to each container within the main container (like I did for the nav links) but it didn't do anything. Only the desktop sizes work, not the mobile sizes.
I see there is a new feature to add code for each Element in the Element Properties pane, but I did this before that was available and so my script is in the Page Manager, fyi.
Can anyone modify the js for me so it works? Or can anyone tell me if this can be accomplished w/o js but using Attributes instead? I'm wondering if it's as simple as how I've got my divs structured (I would have thought a main container would solve it, but it doesn't).