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.

Colin Marshall over 2 years ago

Yes Jade the staging site would be great, my email is colin.michael.marshall at gmail if you want to send me the link.

Thomas E. Vasquez over 2 years ago

@Brad Warren you can also check out WP-Forge, which is built with WordPress and Foundation

Daren Barry over 2 years ago

This FOUC continues to be an issue. I've done the .no-js, I've tried moving the jquery & foundation.js file to the head, I've added the following CSS:

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

.no-js .top-bar { display: none; }

@media screen and (min-width: 50em) {

     .no-js .top-bar { display: block; }

     .no-js .title-bar { display: none !important; }

}

www.switch.web4uinc.com

I still see the FOUC on FireFox. I've asked the boys at Foundation to "take a look"... they essentially want a $2,000 retainer to "take a look" and refer me back to this forum. I have to say, I really like 95% of foundation... but this one - FOUC is becoming a deal breaker. Anyone have any suggestions? 

 

I find it ironic that they want 2k to fix (what I believe to be THEIR issue). I can't be the only developer that sees this issue on PC Firefox

Ian Svoboda 11 months ago

I've found the following CSS can help mitigate the FOUC with responsive menus (in my case, switching from accordion to dropdown)

 

		.is-dropdown-submenu:not(.js-dropdown-active) {
			display: none;
		}