Disappearing (sticky) navigation header

[MicaZmuera]

I’ve noticed, if a link is followed to a bloc, the menu bar does not appear until the user starts to scroll. Normally, this would be fine, but I hard coded a subnav (I’m not a great coder at all, so I basically frankensteined it together) bar. It automatically appears. This leaves a weird gap when links are followed, until the user starts scrolling. Does anyone know if there is a way to make the menu appear instantly, even if a user is not scrolling?

Screenshot of what happens when a link is followed (oh no, the menu is gone = weird white gap!:

Screenshot of what happens once the user starts scrolling (looks like it should):

Alternatively, I would be fine with the subnav not appearing, until the user starts scrolling. I just don’t know how to code that.

[PeteSharp]

Hey @MicaZmuera, It’s hard to give some suggestions here without knowing what you have done.

[MicaZmuera]

@Malachiman - This is all I did to get the green subnav. I am not a coder (I barely know any) so apologies if its poorly done. It works well except in the instance I mentioned above. The white nav is just the standard nav that can be created in Blocs. Does that help? Let me know if you have any questions.

I guess if I could just find a way to get the white nav to auto appear (without requiring scrolling), after clicking a link that goes to an anchor point, that would be perfect and fix the issue. Is there a way to force the Bocs nav bar to appear without scrolling (when going to an anchor point)?

<style>

    .subnav-sticky {
      z-index: 10;
      position: fixed;
    }

    .stuck {
      position: fixed;
      top:0;
      width: 100%;
    }

</style>

[PeteSharp]

So you want no navbar initially, then on scroll you want it to appear? And you also want this to work with the scroll to target?

[MicaZmuera]

Actually, the opposite.

I have links on my site that go to anchor points on other pages. When I click on the links, and go to the anchor points on the other pages, the white nav bar doesn’t appear until I start scrolling. This looks really weird because the green bar I created is always there. I want the white bar to appear immediately (not upon scroll).

I couldn’t find a setting though, that fixes this in Blocs.

[MicaZmuera]

@PeteSharp Here is a video showing the issue:

`

[PeteSharp]

With the Navbar Bloc selected you will see an option in the right panel called “Sticky” tick that. That will keep the navbar always present.

[MicaZmuera]

Hm, I have that selected - The nav instantly appears at the top of the page. It does not though, even with “sticky” selected, if I’m following a link to an anchor point (unless I start scrolling) - like in the video.

[PeteSharp]

What classes have you added to the Navbar?

[MicaZmuera]

Just a class called “header” so I could adjust its height. I also pulled it from the global area to be able to bold the page I’m on.

[PeteSharp]

Does that happen over every page? Does that page your linking to load fine without the anchor? Without a live site or a project, its just the process of elimination.

[MicaZmuera]

Yes, it happens on all pages. I unfortunately cannot share the link because it’s a password protected site for a client. Also, yes the page loads fine. I think it may just be that the menu bars are built to only appear upon scroll (if following an anchor link). I was trying to see if there was a way to override it - but it may not be possible. Thank you for trying to help, so far!

[PeteSharp]

It shouldn’t behave like this. The menu should appear. I will PM you.

[PeteSharp]

Actually I just test this, and I can replicate it. This never happened before?

[MicaZmuera]

Sorry, are you saying when you replicate my design you have the same issue as me?

[PeteSharp]

Just incase someone else is having this issue, one solution is to have the page scroll to the targeted anchor. You can do that by adding this to your page or project footer

<script>
if (window.location.hash) {
    var hash = window.location.hash;

    if ($(hash).length) {
        $('html, body').animate({
            scrollTop: $(hash).offset().top
        }, 900, 'swing');
    }
}
</script>

You can set an offset to suit your website by modifying the following line. XX is the number of pixels you want to offset by - set this to a number, eg. 80

         scrollTop: $(hash).offset().top - XX

[Jerry]

Hi @PeteSharp, can you update the title of this topic so it will be easy for others to find your solution?

[PeteSharp]

Do you have a name suggestion?

[Jerry]

Something like: Disappearing (sticky) navigation header