[Support request] Navigation at bottom of browser?

Home Forums Support [Support request] Navigation at bottom of browser?

Home Forums Support Navigation at bottom of browser?

Viewing 15 posts - 1 through 15 (of 32 total)
  • Author
    Posts
  • #1566294
    steph.waszak@gmail.com

    Hi,
    I have a previously designed website I am working off of that I used a template for years ago. My client really likes how the header and nav works on her old home and listings pages and I was wondering if this was something that was possible to replicate with GP as far as the nav showing on the bottom initially and then moving to the top with a sticky when you scroll down? Example URL in the private notes. The site loads very slow, which is one of the reasons I’m redoing it with GP πŸ™‚
    Thanks!

    #1566645
    Elvin
    Staff
    Customer Support

    Hi,

    You may have to replace the current sticky script being used for it to work similar to your reference site as the current script only toggles from default position property to fixed.

    You’ll need something that toggles from position: fixed; bottom:0; to position: fixed; top:0;.

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

    #1571900
    steph.waszak@gmail.com

    Hm, okay. Where would I find the sticky script? Sorry, I am not too familiar with how to do this but am going to try to figure it out or maybe hire someone to help if I can’t!

    #1572257
    Tom
    Lead Developer
    Lead Developer

    Hmm, this is a tricky one. I thought we could use our sticky feature and simply force the nav to the footer when it’s not sticky, but having the nav forced to the footer confuses the script into not becoming sticky in the first place (the top never reaches the top of the viewport).

    How is your GP site set up right now? Is the navigation acting as the header? Any chance you can link us to it?

    Let me know πŸ™‚

    #1573606
    steph.waszak@gmail.com

    Hi Tom,
    Thanks so much for your willingness to help! Right now, it’s set up with a standard nav up top then a slider under I pulled in through visual composer since that’s what they’re used to editing pages with.

    I was thinking in a worst case scenario something like this could work as a starting point https://generatepress.com/forums/topic/hero-slider-and-sticky-menu-anchored-to-bottom-of-screen/ but I haven’t tried to implement it yet (and will wait now till I hear back). My client is also saying she would not like the logo on the nav (so similar to the reference site I sent as well) on the home and listings pages and instead would prefer it to be on the slider like it is on the old site (which I can do in master slider no problem!).

    The part where it gets tricky, possibly, is she just wants this menu function to appear on the home and pages under listings (again, similar to the old site we did). So it’s 6 pages and then the menu would act as it does now on the others. I am not sure if this is possible. I know I have seen sites where you can have different nav for different pages using plugins but I have been working on the smaller edits before tackling this bigger issue as I was hoping it might be something you guys faced (and maybe conquered) before! If it’s not possible to have the different menus, I think she’d prefer to have it on the bottom and then jump to the top on scroll.

    I am putting all links/access below! I’m doing a backup so you can do whatever you deem necessary! I really really appreciate any and all help here!

    #1574748
    Tom
    Lead Developer
    Lead Developer

    This is custom development, but I do have an idea that’s worth a quick shot.

    Add this javascript to the page:

    window.addEventListener( 'scroll', function() {
        var nav = document.querySelector( '#site-navigation' );
    
        if ( document.body.scrollTop !== 0 ) {
            nav.style.position = 'fixed';
            nav.style.bottom = 0;
            nav.style.left = 0;
            nav.style.right = 0;
        } else {
            nav.style.position = '';
            nav.style.bottom = '';
            nav.style.left = '';
            nav.style.right = '';
        }
    } );

    That should technically only stick the nav to the bottom when you’re at the top of the page.

    Let me know πŸ™‚

    #1576644
    steph.waszak@gmail.com

    Thanks again,
    I am not entirely sure I am doing this correctly. I tried to create a hook and have changed the options from the hook to a couple different options and it just keeps showing the code load into those areas (inside nav, above nav, under the footer, etc). I also tried putting it in the functions and inserting it using Insert Headers & Footers. Can you direct me to where the correct place would be?

    Tried code snippets too but I got this error:
    Don’t Panic

    The code snippet you are trying to save produced a fatal error on line 2:
    syntax error, unexpected ‘var’ (T_VAR)

    The previous version of the snippet is unchanged, and the rest of this site should be functioning normally as before.

    Please use the back button in your browser to return to the previous page and try to fix the code error. If you prefer, you can close this page and discard the changes you just made. No changes will be made to this site.

    #1576910
    Tom
    Lead Developer
    Lead Developer

    Ah sorry, do this:

    1. Create a new Hook Element.
    2. Add the javascipt inside script tags like this:

    <script>code in here</script>

    3. Set the hook to wp_footer

    That should initiate the code.

    #1576947
    steph.waszak@gmail.com

    Hm, unfortunately it didn’t seem to do anything!

    Possibly unrelated, but also it seems the top nav is only transparent when it’s sticky. I am not entirely sure how that happened (should I open another topic?). It’s probably something silly because it’s late lol.

    Thx!

    #1577717
    Tom
    Lead Developer
    Lead Developer

    Hmm, that’s a shame. It’s possible that the only way to do this without a complex javascript solution is to use two navigations. You could use the primary navigation for the sticky nav, and the secondary navigation for the bottom nav.

    If that sounds good, add the second nav to the site and I’ll be happy to help code up the needed code πŸ™‚

    #1577995
    steph.waszak@gmail.com

    I’m down to try! I added the menu to be the primary and secondary nav. Will this work or do I need to make a second copy of the menu in order for us to try? I really appreciate all you’re doing to help!

    #1578884
    Tom
    Lead Developer
    Lead Developer

    That will work! Can you confirm the page you’ve added this to? I’m only seeing the one menu on the page right now.

    #1578951
    steph.waszak@gmail.com

    I didn’t add it to a specific page. I have the secondary nav module enabled, In Menus I have the main set to primary and secondary, and then in the customizer I have secondary nav set to “below header” for location. Am I missing a step?

    #1580171
    David
    Staff
    Customer Support

    Hi there,

    lets try this without the secondary nav.
    First disable the Sticky Navigation in Customizer > Layout > Primary Nav.

    Hook this script into the wp_footer:

    <script>
    let scrollpos = window.scrollY;
    const navigation = document.getElementById('site-navigation');
    
    window.addEventListener('scroll', function(){ 
        scrollpos = window.scrollY;
        if(scrollpos > 10){
            navigation.classList.add('stick-top');
        } else {
            navigation.classList.remove('stick-top');
        }
    });
    </script>

    And then add this CSS to your site:

    @media(min-width: 769px) {
        #site-navigation {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
        }
    
        #site-navigation.stick-top {
            top: 0;
            bottom: auto;
        }
        .admin-bar #site-navigation.stick-top {
            top: 32px;
        }
    }

    For mobile you can use the Mobile Header option in the Customizer > Layout > Header which has its own sticky option.

    #1580789
    steph.waszak@gmail.com

    David, if I could hug you I would! Lol. Thank you, thank you, thank you! This seems to be working as far as the behavior.

    But now there’s another problem. When the menu is at the bottom the dropdown menu still…drops down so it goes past where the viewer can see. Is there a way to have it load based on where the menu is sitting on the page? The original site I had would have it float up if the menu were on the bottom and down if it was up top. I hope that makes sense (if you need the reference again, let me know). I was using mega menu on that site so I am not sure if that makes a difference.

    If we can achieve that, I think I’ll be done bugging you! I am seriously SO thankful for everyone’s help. You are are top notch, definitely some of the best support I’ve ever gotten.

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