[Support request] Navigation at bottom of browser?

[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!

[Elvin]

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

[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!

[Tom]

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 🙂

[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!

[Tom]

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 🙂

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

[Tom]

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.

[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!

[Tom]

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 🙂

[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!

[Tom]

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.

[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?

[David]

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.

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

[Author]

Posts