[Support request] Sticky second navigation

Home Forums Support Sticky second navigation

Viewing 15 posts - 1 through 15 (of 25 total)
  • Author
    Posts
  • #1610162
    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

    #1610260
    Elvin
    Customer Support

    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”.

    A wise man once said:
    "Have you cleared your cache?"

    #1610469
    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?

    #1613716
    Elvin
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1614851
    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

    #1615175
    Elvin
    Customer Support

    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. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #1616247
    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

    #1616424
    Elvin
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1617497
    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.

    #1617763
    Elvin
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1617793
    nik9

    Hi Elvin

    Thanks. I made a short cast (see notes) to explain you what I mean. Hope that helps πŸ™‚

    Cheers

    #1617806
    Elvin
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1618205
    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.

    πŸ™‚

    #1619162
    Elvin
    Customer Support

    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”.

    A wise man once said:
    "Have you cleared your cache?"

    #1619564
    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?

Viewing 15 posts - 1 through 15 (of 25 total)
  • You must be logged in to reply to this topic.