[Support request] Centred, Overhanging Logo Not Fully Hiding On Scroll Down

Home Forums Support [Support request] Centred, Overhanging Logo Not Fully Hiding On Scroll Down

Home Forums Support Centred, Overhanging Logo Not Fully Hiding On Scroll Down

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #600689
    Alex

    Hi Team,

    I’m using the following code to centre my logo on my navigation bar and allow it to overhang the navigation bar:

    /* Centers Logo */
    @media (min-width: 769px) {
    	.site-logo.sticky-logo.navigation-logo {
    		position: absolute;
    		left: calc( 50% - 35px);
    		/* 50% from the left - half your image width */
    	}
    }
    @media (max-width: 768px) {
    	.site-logo.sticky-logo.navigation-logo {
    		position: absolute;
    		right: 0;
    	}
    }
    
    /* Allows Logo to Overhang navigation menu */
    @media (min-width: 769px) {
    	.main-navigation .sticky-logo img {
    		height: 70px;
    	}
    }
    
    @media (max-width: 768px) {
    	.main-navigation .sticky-logo img {
    		height: 70px;
    	}
    }

    I’m also using sticky navigation, with ‘hide when scrolling down’ enabled.

    My problem is when the sticky navigation hides, because the logo is overhanging the sticky navigation bar, half of the logo is still visible. I would like the sticky navigation bar and the logo to be fully hidden on scroll down.

    I understand that the ‘hide’ function is really just translating the menu up by an amount equivalent to its height. How do I increase this value? Or alternatively, is there another way to hide the logo entirely on scroll down?

    Also, I noticed that if I made the sticky navigation bar transparent, there’d always be a thin, faint grey line outlining its edge. It looked like it might be a shadow or something. However, I understand the sticky navigation inherits its colours from the primary navigation, and it didn’t appear at the top of the page for the primary navigation. Can you explain this? It’s not currently a problem with my site as my sticky navigation bars are now opaque, but that might not be the case on future sites.

    I look forward to your feedback!

    Thanks,

    Alex

    GeneratePress 2.1.2
    #600759
    David
    Staff
    Customer Support

    Hi Alex,

    simple one to remove the box-shadow from sticky navigation:

    .sticky-enabled .main-navigation.is_stuck {
        box-shadow: none;
    }

    Is it possible to get access to the site so we can see what we’re dealing with regards the logo.

    #600879
    Alex

    Hi David,

    Thanks for the quick reply! I’ll save that bit of code for future use.

    I’ve taken down the coming soon page so you should be able to see the site. The landing page is a single full screen page so you’ll need to click through. The ‘Explore’ page will illustrate the issue.

    Please let me know if you need login details and how I should send them to you.

    Thanks!

    #601245
    Tom
    Lead Developer
    Lead Developer

    Interesting issue! We don’t add a class while scrolling down, which makes it difficult.

    I wonder if something like this would work:

    var lastScrollTop = 0;
    jQuery(window).scroll(function(event){
       var st = jQuery(this).scrollTop();
       if (st > lastScrollTop){
           jQuery( '.navigation-logo' ).css( 'opacity', '0' );
       } else {
          jQuery( '.navigation-logo' ).css( 'opacity', '1' );
       }
       lastScrollTop = st;
    });

    You can add it to your existing .js file if you have one, or wrap it in <script></script> tags and place it in the wp_footer hook.

    Let me know πŸ™‚

    #602817
    Alex

    Hi Tom,

    I’m glad I could provide you with something interesting πŸ™‚

    Thanks for the code! I put it in the wp_footer hook and it almost worked. As given it seemed to be breaking the sticky navigation such that it didn’t render at all. I inspected the site and it was throwing an error related to the dollar sign in your code. I did some research (I’m not too clued up on web code) and changed the dollar sign to jQuery as per the below and it seems to have done the trick. The code I used:

    <script>
    var lastScrollTop = 0;
    jQuery(window).scroll(function(event){
    	var st = jQuery(this).scrollTop();
    	if (st > lastScrollTop){
    		jQuery( '.navigation-logo' ).css( 'opacity', '0' );
    	} else {
    		jQuery( '.navigation-logo' ).css( 'opacity', '1' );
    	}
    	lastScrollTop = st;
    });
    </script>

    While the above works, if you happen to be looking at the logo while scrolling down slowly, it disappears instantly, whereas the sticky navigation bar slides up. It’s therefore a tiny bit jarring and less elegant than the ideal. Granted I’m a bit of a perfectionist so if there’s no easy way to make this even better, I’ll be very happy with your above solution!!

    I tried using the jQuery .fadeOut and .fadeIn functions instead of the CSS opacity function you gave to try to smooth out the effect. It seems to work to fade the logo out but not back in again. If I use the .fadeOut twice, then there seems to be some kind of major delay. Perhaps I didn’t use it correctly.

    When using your solution, there also seems to be an interesting phenomenon that depends on the device I use to scroll. If I use the touchpad on my laptop, it always works perfectly. If I use my Logitech M235 cordless mouse (it’s a cheap mobile one), then sometimes when scrolling up, the logo disappears even though the sticky nav bar is visible. I imagine this might have to do with the polling rate and the values returned by the scroll functions above? Any thoughts? It’s not consistent in the way it manifests.

    I look forward to your feedback πŸ™‚

    #603136
    Tom
    Lead Developer
    Lead Developer

    Ah, should be fixable. Can you remove maintenance mode, or let us know the login details through the Account Issue form?: https://generatepress.com/contact

    #603870
    Alex

    That sounds promising πŸ™‚ I’ve taken down the maintenance mode and sent you login details.

    #603984
    Alex

    Hi Tom,

    While you’re in there, could you please have a look to see why the CSS in the Simple CSS metabox on my Blog page (now called News) isn’t working?

    Thanks in advance.

    Alex

    #604069
    Tom
    Lead Developer
    Lead Developer

    Hmm yea, that complicates things a bit!

    Are you able to add another JS file to your child theme? If so, we can try this: https://github.com/customd/jquery-visible

    Let me know once you add it and I’ll test the code.

    Metabox options (like Simple CSS) are ignored on the blog page (and archives). This is a WordPress thing.

    Instead, add your blog specific CSS to the global CSS, and add .blog in front of your selectors.

    #611379
    Alex

    Hi Tom, my apologies for not getting back to you sooner. The last week has been a bit hectic.

    The .blog snippet worked perfectly! Thank you.

    Regarding the logo sticky scroll issue, I wasn’t actually using a child theme on the site, as there were no major changes beyond some CSS I added to the customiser and Simple CSS box. Now I’m basically in a handover phase with my client – he’s doing the last tweaks on the site himself and I’m assisting him as necessary. We’re going to create a child theme and add the JS file you linked to, so once that’s done I’ll get back to you.

    #611862
    Tom
    Lead Developer
    Lead Developer
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.