Entire Nav Bar moves up on first click of any link

@Norm and others, I’m having an odd issue where the main navigation bar (the entire row of text links) moves up the first time you click one of the links. (there are 4: GARDEN CENTER, LANDSCAPING, FIVE & TWO CAFE, MUSTARD SEED BOUTIQUE)

Here’s a link to the website:

It works fine in subsequent clicks - of any of the links - but that initial click makes the entire nav bar jump upwards a bit. Looks very bad. (If you don’t see that behavior, you’ll want to reload the page and then watch the nav bar when you click a nav bar link).

I’m guessing it has something to do with the fact that that nav bar is set up as sticky and guessing also that it has to do with some javascript behavior, that is loading the very first time so that results in a slight delay that very first click.

Any help very much appreciated. This website is just about ready to launch but need to get this odd behavior fixed first. Warm Regards, - Randy

@Norm? As I said, I am planning to launch this site as soon as this issue is resolved. Can you offer any help? Thank you in advance! - Randy

It seems to be affecting your main home page nav bar. Once going to one of the 4 lower pages, the nav bar seems to work OK on those pages. Is there a difference in nav bars of main vs lower pages?

I made a screen shot below while using Firefox.

Good luck with finding issue.

@pruthe, Hello and thank you for your time with this. The nav bar is part of the global content area, so to my knowledge there should be no difference at all. As I indicated in my post, I’m suspecting the issue has something to do with a function that loads the very first time a link is clicked. Once the function’s been called/activated, there is no delay. But that’s a total guess. I’ve spent considerable time trying to troubleshoot it with no luck yet… There’s a lot of smart guys in this forum, and I’m hoping one of them knows what the issue is. Thanks Again, and if you figure it out, please let me know! - Randy

PS: Thank you for the screenshot. I tried but couldn’t get the timing just right! (How did you do that?)

Hello @Creative, can you please send the bloc for the nav, so we can see what is wrong? And if there is any code, as you said that loads, first time, let us know please.
We will try to help you…

@Pealco, do you need the entire header bloc?

@Pealco, here’s the top and bottom dynamic areas. I left 2 pages in place so you can go back and forth. Thank you for being willing to try and help with this. Warm Regards, Randy

DTE-NAV-ISSUE.bloc.zip (169.0 KB)

Hi @Creative,

To get the screenshot, I think I had the Tools->Web Developer->Browser Console open on Firefox when I clicked on Garden Center link from main home page. Then while on the Garden Center page, I clicked the Back button to go back to main home page. At this point, the nav bar remained stuck in up position. That allowed me to get the screenshot.

I did this again for the below screenshot, but left console in view since some errors were generated.

Maybe this can help @Pealco and any others that may look at it.

Thx.

Paul

1 Like

Hello @Creative, I found something that could cause that…

  • in the: image
    You have an animation “Lazy”; - Try to remove it. Change it to none.
    You have a class entity-nav-bar-bloc, with a width of 100% but you don’t need it as you can choose this in here: image

In the Code of the page if you send all, you have:

<style>


</style>

But no information, and then in the footer code you have two entries that already exists in the core of the blocs, so you are generating errors, look here:

And try to export the site without the “Enable Lazy Loading”

And there is a class “entity-nav-bar-bloc” that you have the Height of 60px, but then you have a class inside: “brown-nav-bar-li” that have Margin and Padding that have 15px and then the text don’t have space to fit correctly.

I change all this, and didn’t have the problem you refer.
Please try.

1 Like

@pruthe, thank you! - Randy

@Pealco, thank you so much for the time you put into this! I rarely put code into the footer (in the page settings) and forgot it was even there. The home page is the only one I had done that with. I was working on integrating I believe it was the social media feeds and it called for those scripts. I wasn’t aware they were native inside of blocks. With the ‘defer’ attribute, I can see where that likely caused the delay on the home page. I have made the changes you suggested and it seems to work fine. Again, thank you so much! - Randy

PS: I wasn’t able to change the animation speed to ‘none’ as that’s not an option, but did change it to ‘normal’. Not sure if that had any affect but who knows… I will have to remember what you said about not needing to set the width to ‘100%’ as I can do that in the tool panel on the right. Have you been coding a long time? What are your strongest areas? I’m curious because my company is young and I’m in need of collaboration with other developers from time to time, depending on the needs of the project.

Also, with regard to the website you just examined, do you know how I might adjust the settings so the header bloc and Title bloc below it (that says’ Garden Center & Shops’ don’t flicker every time you click a link? It seems that once you load the dynamic components, that they should be stored in a cache somewhere so they don’t have to re-load every time you switch pages. This is a problem I’ve dealt with on pretty much every Blocs site I’ve built in the past year, so if you could shed some light on that, I’d sure appreciate it. Warm Regards, - Randy