SD5 - Menu/Header appear & disappear...

User 2659348 Photo


Registered User
113 posts

Can anyone help solve this mystery?
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).

Attachments:
Knowing is half the battle
User 187934 Photo


Senior Advisor
20,181 posts

See if this works.
Attachments:
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2659348 Photo


Registered User
113 posts

Eric, that is GREAT! How much do I owe you???

I see that you took away the script I had and input one that works. Did you write that just now?? It was so quick!

Also, I see the main header container has a Transition (apply to: Top). Did you do that or was that some old thing I tried and left in there?

This seriously saved me and I appreciate it SO much!
If I can push my luck..... is there a simple add or adjustment to the script to make it fade down & fade up like it does on the facebook app, instead of just a sharp disappear & reappear?
Knowing is half the battle
User 187934 Photo


Senior Advisor
20,181 posts

Yup.;)
Let me know if you want it to fade faster or slower.
Attachments:
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2659348 Photo


Registered User
113 posts

That's perfect! Thanks Eric!
:D
Knowing is half the battle

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.