[Resolved] Sticky second navigation

[nik9]

Hello,

We use the following CSS to make our second navigation sticky, For the primary navigation we use the shrink option. How when we scroll down, then a space between the sticky second nav and the primary nav appears. Can we change this in order that is is a smooth transition or something?

.secondary-navigation {
position: -webkit-sticky;
position: sticky;
top: 80px;
}

@media(min-width: 1301px) {
.secondary-navigation {
top: 85px;
}
}

Cheers

[Elvin]

Hi,

You’ll have to use a script for that.

Try this:

<script>
const stickyNav = document.querySelector('nav.main-navigation');
const secondaryNav = document.querySelector('nav#secondary-navigation');

var lastScrollTop = 0;

// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
document.addEventListener("scroll", function(){ // or window.addEventListener("scroll"....
   var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
   if (st > lastScrollTop){
      if(stickyNav.classList.contains('sticky-navigation-transition')){
				var stickyNavTransitioned = document.querySelector('nav#sticky-navigation');
				var sn_height =  stickyNavTransitioned.offsetHeight;
				console.log(sn_height+"stickyNavTransitioned");
				secondaryNav.style.position = "sticky";
				secondaryNav.style.top = sn_height+'px';
			} else if(stickyNav.classList.contains('sticky-navigation-transition') == false){
				console.log("not transitioned");
			}
   } else {
			console.log("scrolling up");
   }
   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);

</script>

Place it on a Hook Element hooked to wp_footer with display rule location set to “Entire Site”.

[nik9]

Hi Elvin,

Hmm.. I did taht now but it don’t scroll. Do I have to adjust the scroll by px or is that automatically?

[Elvin]

Hmm.. I did taht now but it don’t scroll. Do I have to adjust the scroll by px or is that automatically?

No need. It should be working as is. It’s working on my end so it’s strange that it doesn’t on yours.

Reminder: This is kind of site customization is out of our scope. While we attempt to help out as much we can. We can’t guarantee or debug things like these. You can try playing around with the code to make it work.

[nik9]

Hello Elvin, Thanks!

Okey, but then it would be worth to think about, if that not should be a feature in GP for the customizer. I mean, we have the option to set the second nav below the header and we can also shrink the main header on scroll. But when we do this we need custom script in order that it looks nice 🙂

I understand that you can not build every case into a fast & light theme. This is actually why I like GP so much. But when it comes to header, the built-in option and without specific Dev knowledge its hard to get this to work.

But challenge accepted!

Just to make sure: I’m talking about this here: https://ibb.co/zXdJXZq
This is working on your end?

I will try! I’ll keep you posted! 🙂

Cheers

[Elvin]

Okey, but then it would be worth to think about, if that not should be a feature in GP for the customizer. I mean, we have the option to set the second nav below the header and we can also shrink the main header on scroll. But when we do this we need custom script in order that it looks nice 🙂

You can raise a topic listing your feature requests. 🙂

It may be actually be a good time to do it now while GP’s scripts are in transition from jQuery to vanilla JS. Perhaps Tom can add this in when he’s on it.

Just to make sure: I’m talking about this here: https://ibb.co/zXdJXZq
This is working on your end?

Yes it was working 100% but I’m unable to link the demo back again now as I’ve already fully wiped my sandbox site to avoid conflicts when I tackle and test other support questions.

I will try! I’ll keep you posted! 🙂

Good luck! Looking forward to your success. Let us know. 😀

[nik9]

Hello Elvin,

where can I add a topic about this? I will do for sure becasue its still not working. 🙁 All what I try.. no success.

In the console i never the the log console.log(sn_height+"stickyNavTransitioned");

I only see the logs from this part:

			} else if(stickyNav.classList.contains('sticky-navigation-transition') == false){
				console.log("not transitioned");
			}
   } else {
			console.log("scrolling up");
   }

Cheers

[Elvin]

where can I add a topic about this? I will do for sure becasue its still not working. 🙁 All what I try.. no success.

You can open a new one on this forum or raise a new issue here:
https://github.com/tomusborne/generatepress

I’ve tried to refine the code a bit and put the demo site back so you could check how it works.

Here’s the code:

<script>
const secondaryNav = document.querySelector('nav#secondary-navigation');

var lastScrollTop = 0;

// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
document.addEventListener("scroll", function(){ // or window.addEventListener("scroll"....
		var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
		var siteNav = document.getElementById('sticky-navigation');
		if (st > lastScrollTop){
      if(document.contains(siteNav)){
				if( siteNav.classList.contains('sticky-navigation-transition') ){
					var sn_height = siteNav.offsetHeight;
					console.log(sn_height+"stickyNavTransitioned");
					secondaryNav.style.position = "fixed";
					secondaryNav.style.top = sn_height+'px';
				}
			} else if( !siteNav.classList.contains('sticky-navigation-transition')){
				console.log("not transitioned");
			}
		} else {
			console.log("scrolling up "+st);
			if(window.scrollY==0){ 
			 	console.log("your are at the top");
				secondaryNav.style.position = "relative";
				secondaryNav.style.top = "0px";
			}
		}
	
		lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);

</script>

Here’s the demo site: Demo site

Note: It will look weird when the WP Dashboard is open (logged in) but the live site looks as intended.

[nik9]

Ohh man… I could beat myself..

There was still this CSS active. That’s why it was not working. I’m so sorry Elvin. I’m annoyed with myself right now. haha..

@media(min-width: 1301px) {
.secondary-navigation {
top: 85px;

But you navigation looks very nice. I like that on scroll behavior there. Can you maybe share all setting and CSS to get this like this? I was playing with main navigation faded on sticky but its not the same.

[Elvin]

But you navigation looks very nice. I like that on scroll behavior there. Can you maybe share all setting and CSS to get this like this? I was playing with main navigation faded on sticky but its not the same.

Not exactly sure what you mean. I don’t have any custom CSS added to it(desktop view). I’m using purely the GeneratePress 3.0 defaults. It’s a fresh site. I’ve only added the script to show how the script works.

Also. I’m not using sticky. I’m swapping between “fixed” and “relative” for the secondary nav. You can see it on my updated script.

[nik9]

Hi Elvin

Thanks. I made a short cast (see notes) to explain you what I mean. Hope that helps 🙂

Cheers

[Elvin]

Ah right.

That’s out of the box behavior from the script I’ve written.

Its behaves that way because there’s an “in between” state on the default sticky script of the theme where the sticky navigation is primed to be sticky but is yet to be in full sticky state.

I’ve written the script to match that behavior where the secondary nav doesn’t immediately go into sticky mode when scrolled. It checks if the sticky nav is already in full sticky state and if it is, then it goes into full sticky state as well plus adding a spacing so it doesn’t overlap with the sticky nav.

You can actually observe this behavior when you inspect the page. See this:
https://share.getcloudapp.com/llunLgNd

You’ll notice that the <nav id="site-navigation" ...> changes its ID to <nav id="sticky-navigation" ...> but doesn’t exactly go into full sticky state until before sticky-navigation-transition class is added to it.

The only CSS I would’ve added is probably this:

nav#secondary-navigation {
    width: 100%;
}

It’s so the secondary nav goes full width of the viewport.

[nik9]

Yes I see. But in your navigation the main navigation becomes is invisible when start scrolling and then it comes back. That it was I mean. How I can do this.

🙂

[Elvin]

Yes I see. But in your navigation the main navigation becomes is invisible when start scrolling and then it comes back. That it was I mean. How I can do this.

If you were pertaining to the fade transition, you can set that on Appearance > Customize > Layout > Sticky Navigation and set the “Transition” to “Fade”.

[nik9]

It’s strange. because the sticky second nav does not move to the top when the main nav is not visible. I use this script here https://generatepress.com/forums/topic/sticky-second-navigation/#post-1616424

Currently we us this CSS

.secondary-navigation {
position: -webkit-sticky;
position: sticky;
top: 85px;
}

But the top: 85px; are always there. So if the user scrols and the main nav is not visible it should be top: 0. And when the user scrolls further down and the main nav is visible, then it should be again top: 85px;. Must that be implemented in the script or what’s wrong with my CSS?

[Author]

Posts