Menu icon Foundation
Top Bar Flash of Unstyled Content

I'm having an issue with the top bar navigation. It seems that every time I reload any of my pages, the (hidden) mobile top bar flashes. Any idea on how I can fix this?

topbarnavigationflashunstyledjs

I'm having an issue with the top bar navigation. It seems that every time I reload any of my pages, the (hidden) mobile top bar flashes. Any idea on how I can fix this?

This post has been closed. No new replies can be added.

Brian Tan almost 3 years ago

Move jquery and foundation js to the < head > section.

Leave Foundation initialization at the bottom of page.

That should reduce time delay between dom rendering and foundation init to hide content. As a trade off, initial content display will be delayed.

Alternatively, style the (hidden) content with display:none.

E. Smythe almost 3 years ago

If you're using drilldown menu with the topbar, Brian's ideas won't help completely. The flash is still there. It's easier to only add the drilldown menu to the DOM if/when the user clicks on the topbar using javascript.

Colin Marshall almost 3 years ago

Check out these two Issues on github:
https://github.com/zurb/foundation-sites/issues/7083
https://github.com/zurb/foundation-sites/issues/7252

If you're using the Responsive Toggle example from the docs, one solution I came up with was this:

.title-bar {    
    @include breakpoint(medium) {
        display: none;
    }
}

.top-bar {
    display: none;

    @include breakpoint(medium) {
        display: block;
    }
}

There are also solutions using .no-js that are discussed in those issue threads linked at the top of this post.

Pam Bifaro about 2 years ago

I am having this same problem with the menu showing sub menus briefly in Chrome. Non of the mentioned her has worked for me is there any solution for this yet?

Pam Bifaro about 2 years ago

I am having this same problem with the menu showing sub menus briefly in Chrome. Non of the mentioned her has worked for me is there any solution for this yet?

E. Smythe about 2 years ago

Which solutions did you try? If they are not working, I suspect your implemented them incorrectly. Maybe you can share your code so we can check?

 

Alex Alex about 2 years ago

Hello.I had the exact problem I fix it,thanks to http://foundation.zurb.com/forum/posts/39063#comment_31634

Pam Bifaro about 2 years ago

I tried the no-js and it did not work for me. I included it in the html tag in the header then added the css to the html page and also deleted modernizr.js. But still had the same FOUC

Daren Barry about 2 years ago

In a case like this, it's always helpful to know what version of foundation you're running, and Ideally a url example. I had the same issue running 6.0.5 and upgraded to 6.2.1, then add the following line at the end of the foundation css OR i like to place it in my 2nd CSS file (after foundation.css) that way in case you're using sass (which means you're modifying the foundation.css file... this line will always get applied).

 

add: [data-dropdown-menu] ul { display: none; }

 

Pam Bifaro about 2 years ago

I believe I'm using Foundation 6.2.1

The website is      https://www.aurstaff.com

 

Daren Barry about 2 years ago

@Pam Bifaro, using Foundation 6, you no longer need modernizer, pull that out. I also switched my jquery to 2.1.4 (yours looks to be 2.2.2) then added the css I posted earlier. that fixed mine. try that!

Daren Barry about 2 years ago

@Pam Bifaro, I don't have a ton of experience using .aspx (it's outdated) and I've never run foundation on

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


I'd say it's time for an HTML 5 upgrade

Brad Warren almost 2 years ago

Foundation 6.3.. still not resolved.. Too busy rolling out new features without fixing the basics.. jeez

Colin Marshall almost 2 years ago

 @Brad Warren did you attempt the solution I gave in this thread?

Preventing FOUC with the Responsive Navigation is also explained in the Docs here:
http://foundation.zurb.com/sites/docs/responsive-navigation.html#preventing-fouc

Jade almost 2 years ago

We've been struggling with this for some time now too, it's been consistent on all our sites, no matter what we've tried. I have the solution applied that's in the documentation for Preventing FOUC but it doesn't do anything.

Anyone ever solve this one? It never happens when I use Bootstrap, so why does it only happen with Foundation? My boss is starting to freak about it, wants me to start using Bootstrap instead (which I absolutely hate) so hoping this gets resolved soon.

Colin Marshall almost 2 years ago

Jade can you please provide a CodePen that demonstrates how you have it setup? thanks.

Pam Bifaro almost 2 years ago

Add the display:none to the opening <body>

<body style="display:none;">

Add this script before the closing </body>


<!-----Flash of Unstyled Content---------->
<script>
$('body').show();
</script>
<!-----Flash of Unstyled Content---------->


<!-----Flash of Unstyled Content---------->
<noscript>
<style>body {display:block !important;}</style>
</noscript>
<!-----Flash of Unstyled Content---------->

 

Here is one of the sites we did this on:

https://www.aurstaff.com/

Brad Warren almost 2 years ago

Hello - I had found Colin's link just after my post and it to my relief resolved the FOUC with the mobile menu bar. Attempts with the dropdown arrows in the nav were unsuccessful so I just removed then via the _settings.scss file.

Working with F6 could be so much faster and pleasing  than using WordPress, however, there are so many workarounds and time wasted for the most common functionality that I might stick with what I know works.

Happy Coding...

 

Colin Marshall almost 2 years ago

@Brad Warren sorry for the frustrations you have had. The hard thing about making a framework like Foundation is that you have to account for as many use cases as possible, so we don't want to make Foundation overly opinionated so people can use it how they need to. That requires some user customization to get up and running. Don't give up on us yet though, we're constantly listening to people like yourself and improving Foundation so it's easier for developers of all levels to use.

As far as WordPress vs. Foundation goes, you can't really compare the two because Foundation is a front-end framework and WordPress is a content management system. You can actually use them together, as there are numerous WordPress starter themes that use the Foundation framework. FoundationPress and JointsWP are two I would recommend looking into.

Jade almost 2 years ago

@ColinMarshall  I tried codepen https://codepen.io/jadecactus/pen/jyQegE but it's not really working, You can check it out though, it has all the CSS and HTML there. Or if you would like to see the actual staging site, I can send a link privately (I can't post it here) - it's a WP site. Thanks!