I just implemented the Navigation stack by Yuzool. I am liking the stack a lot, but there is an issue when the page loads. Upon opening a page, the navigation data loads vertically, pushing the other content down, before settling into the expected formatting. This happens briefly, but is annoying, and the delay depends on internet speed and size of the page content. Presumably the stack loads and displays it’s data before the formatting commands kick in.
I am using Rapidweaver 8 with Foundation. The formatting delay seems to be most prominent on Firefox and Safari. Anyone have any idea what is going on or how to fix this? Example page here:
It’s been a couple days with no comments on this issue. Hopefully at least the developer @yuzool will come forth at some point. Anyway, I have spent far too much time troubleshooting the issue, and presume that the normal behavior of the Navigation stack is that it’s formatting has a delayed load. This results in the text of all the page names loading vertically at first, and then the navigation bar takes it’s normal shape. Pages with lots of content seem make the issue more prominent, a couple seconds delay sometimes. It is a shame, because the Navigation stack is pretty nice otherwise. I would like to use it, but the page load issue is bad presentation in my opinion.
I have a lot of pages on my site, and have reverted all of them back to the standard Foundation Top Bar navigation. I will leave the example page in the first post active with the Navigation Stack for a few more days, in case anyone want to take a look.
I know @dave uses the Navigation stack a lot. He might be able to help. I believe he also develops some pretty large websites (i.e. many pages) using the Navigation stack. Unfortunately I can’t help you as I don’t use it.
Thanks @Mathew for alerting me - I missed this question. Are you using the most recent version, @Mysterion? I ask because when I first implemented it, the stack was painting the screen the chosen background color for a half second or so. But, at some point, it quit doing so - or, if it continues to do so, I’m not seeing it at the speed I’m connected at (300Mbps at home…but slower at work).
I also own Will Woodgate’s Gator navigation stack - it and Navigation are very similar in appearance. If it works, and Navigation won’t, then (imo) it’s money well spent. You can read more about it and download a free demo here: https://stacks4stacks.com/gator/. If you try out the free version, you will certainly need the following code in order to make the colors work correctly in foundation(I’ve sent this to Will, but I don’t see it on his site). Also, be aware that Gator uses Font Awesome 5, so adding version 4 icons will NOT work unless you add the following code to the site-wide code page (in the header area).
Be sure to view them both on a phone (or use Chrome and reduce the width until the menus go responsive).
<<<< FOR GATOR >>>> ADD TO THE SELECTORS AREA IN THE HUD: .menu li.active a and .menu.dropdown li.active a
ADD TO THE HEAD AREA ON THE CODE PAGE: <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
Thanks for your input @dave. Yes, I am using the latest version of Navigation, as it was purchased about a week ago. Your example site does not exhibit the exact same issue, but it does do what you describe about painting the screen the background color at first! You probably don’t see it due to your very fast internet speed. I have crummy DSL that is less than 3mbs, however that can reveal what other people with slower internet will experience.
Also I appreciate your pointing out Will’s Gator stack. It might be a possibility if my Navigation stack issue is not resolved. The Top Bar stack that comes with Foundation works fine for me in the meantime, even though it does not have all the bells and whistles that Navigation or Gator have.
Hi Jannis. The theme I am using is Foundation. If I use a blank page as you suggest, the entire page loads very fast, because there is no content. So fast, that I do not see the Navigation stack loading issue. The issue seems to become manifest on pages with more content. In fact, the page I used as an example is the most content-heavy on my site, a blog page using your very own Poster stack! Poster is an awesome stack by the way.
BTW: I don’t see your symptom on an iPhone, have to check with a real browser…
I would be interested to know if you replace Navigation with @willwood’s Gator stack (as mentioned, there is a free trial version on his site), do you still see the issue? if not, I will probably replace Navigation with Gator on my sites (I own both Stacks, as well as Foundation…and a ton of other stacks…so I can probably open and save your file just fine). If you’d like me to test it, you’re welcome to send me one page of your project to dave@mediapressionsDOTcom. I’ll replace Navigation with Gator and then post to a non-indexable URL for you to look at.
Thanks @Mysterion - I got a message from another user with a similar situation and can patch an update for this. I will find some hours over the weekend and ship an update
In the meantime, there is a fadein option already there since 1.3.0:
Have you tried that to see if it helps?
Will also look at making the load faster
Will post the results in here soon
Edit - @Mysterion my laptop is slow/old and connection poor and couldn’t see it in Safari. Switched to Chrome and can see exactly as your screenshot. Will take a look at it over the weekend and release a patch. Cheers