Live Link to Site: http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/* Note the JS Fiddle contains the java that is doing the class switching and other things, when shrinking the viewport to mobile size it does not quite behave well however. Use the live link above for better visual understanding.Back-story:I am have developed an off-canvas mobile menu for my website which uses nothing but CSS with the exception of some jquery class switching. The navigation is being dynamically generated using PHP. Initially when I created this nav I had two separate Navigation instances that generated two sets of HTML for the same nav. One generated using \[code\]<nav>\[/code\], and one using \[code\]<div id="nav">\[/code\].The \[code\]<nav>\[/code\] set of HTML was styled for the full-width desktop version of the navigation. The \[code\]<div id="nav">\[/code\] set of HTML was styled for the mobile version of the site using media queries. Using media queries I simply hid the mobile version at the desktop size, and then in mobile media query hid the desktop version and set #nav to \[code\]display: block;\[/code\]This worked flawlessly with no graphical problems or issues.The current story:Now, I have consolidated the two separate navigation's into a more resilient PHP structure. That said, it is much easier and more efficient to use one set of HTML and style it differently for mobile etc.I duplicated the site and painstakingly changed the mobile classes to the relative \[code\]nav > ul > li > ul\[/code\] selectors. (no longer using ID of nav since I have one set of HTML I have to make desktop and mobile work for one set of HTML).For some reason now when loading the site on any mobile device (even a desktop browser shrunk to mobile size), when you load a page, you can see the navigation links load on page then disappear, hence the "flash".I have tried setting the entire nav to \[code\]display: none;\[/code\] at the top of my styles for media query then \[code\]display: block;\[/code\] at the bottom of the media query styles thinking I could hide the nav until it styled it and moved it off canvas then after that point set it to block so as to make it "re-appear" even tho it would be off-screen. But to no avail... This does not work.I am looking for a fix for this flash and I don't particularly care how it's done as long as it is not reverting back to my previous structure using two separate sets of HTML.***Note that the CSS below does reference the ID #nav. This is accurate, I did not remove the ID, I just did not use it to style the bulk of the nav. The nav HTML structure is standard for a sub menu nav. UL - LI - A with UL's inside of LI's and etc.CSS:\[code\]/* 01. MAIN NAVIGATION STYLES */#nav {display: none !important;} /* IMPORTANT, PREVENTS NAV FROM FLASHING ON MOBILE */.nav-container { /* THIS HAS BEEN RESET BELOW */ /*overflow: hidden;*/ height: 42px; /* height compensating for outer-border */ border: 1px solid #dfdfdf; /* Outer grey border */ border-radius: 5px;}#nav {display: block !important;} /* IMPORTANT, MAKES NAV VISIBLE AGAIN AFTER FLASH FIX ABOVE */nav { /* THIS HAS BEEN RESET BELOW */ height: 40px; /* height compensating to get white and grey border */ border: 1px solid #fff; /* Inner white border */ border-radius: 5px; /* rounded borders */ filter: progidXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3'); -ms-filter: "progidXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3')"; background-image: -moz-linear-gradient(top, #fefefe, #f3f3f3); background-image: -ms-linear-gradient(top, #fefefe, #f3f3f3); background-image: -o-linear-gradient(top, #fefefe, #f3f3f3); background-image: -webkit-gradient(linear, center top, center bottom, from(#fefefe), to(#f3f3f3)); background-image: -webkit-linear-gradient(top, #fefefe, #f3f3f3); background-image: linear-gradient(top, #fefefe, #f3f3f3);}nav ul { position: absolute; /* allows us to absolute position the subnavs */ z-index: 10; display: block; width: 100%; height: 40px; /*height of inner nav for white border */ padding: 0; margin: 0;}nav ul > li { position: relative; /* added */ display: inline-block; height: 40px; padding: 0; margin: 0 0 0 -4px;}nav ul li:nth-child(1) { margin-left: 0px; border-radius: 5px 0px 0px 5px;}nav ul li a { color: #777; text-decoration: none; display: block; height: 24px; padding: 8px 16px; margin: 0;}nav ul li a:visited { color: #777;}nav > ul > li:hover > a { /* USING > FORCES LI TO STAY IN HOVER STATE EVEN WHEN IN SUBNAV */ color: #fff; text-decoration: none; filter: progidXImageTransform.Microsoft.gradient(startColorstr = '#555555', endColorstr = '#4c4c4c'); -ms-filter: "progidXImageTransform.Microsoft.gradient(startColorstr = '#555555', endColorstr = '#4c4c4c')"; background-image: -moz-linear-gradient(top, #555555, #4c4c4c); background-image: -ms-linear-gradient(top, #555555, #4c4c4c); background-image: -o-linear-gradient(top, #555555, #4c4c4c); background-image: -webkit-gradient(linear, center top, center bottom, from(#555555), to(#4c4c4c)); background-image: -webkit-linear-gradient(top, #555555, #4c4c4c); background-image: linear-gradient(top, #555555, #4c4c4c);}nav > ul > li:nth-child(1) > a { /* FIX ROUNDED EDGE FOR FIRST A HOVER STATE */ border-radius: 5px 0px 0px 5px;}/* Sub nav styles start here */nav ul li > ul { /* BASIC STYLING PLUS HIDE */ /* THIS HAS BEEN RESET BELOW */ position: absolute; display: none; z-index: 1; width: 150px; height: auto; top: 100%; left: 0; border: 1px solid #d4d4d4; background: #f6f6f6;}nav ul > li:hover > ul { /* ON HOVER MAKE SUB-NAV VISIBLE */ display: block;}nav ul li ul li { /* THIS HAS BEEN RESET */ position: relative; height: 40px; display: block; padding: 0; margin: 0; border-top: 1px solid #fff; border-right: none; border-bottom: 1px solid #f2f2f2; border-left: 1px solid #fff;}nav ul li ul li a { color: #777; height: 24px; padding: 8px 12px; margin: 0; background: #fafafa;}nav ul li ul li a:hover { /* SUB-NAV HOVER STATE */ color: #777; text-decoration: none; background: #fff; border-left: 5px solid #555; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: border 0.4s ease; -o-transition: border 0.4s ease; transition: border 0.4s ease;}/* SECOND LEVEL SUB NAV STYLES */nav ul li ul li ul { position: absolute; display: none; z-index: 1; width: 150px; height: auto; top: -2px; left: 100%; border: 1px solid #d4d4d4; background: #f6f6f6;}nav ul li ul li:hover > ul { display: block;}nav ul li .active { color: #fff; background: #8dc63f; background: -moz-linear-gradient(top, #8dc63f 0%, #86bd3c 50%, #81b539 51%, #78a934 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8dc63f), color-stop(50%,#86bd3c), color-stop(51%,#81b539), color-stop(100%,#78a934)); background: -webkit-linear-gradient(top, #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%); background: -o-linear-gradient(top, #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%); background: -ms-linear-gradient(top, #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%); background: linear-gradient(to bottom, #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%); filter: progidXImageTransform.Microsoft.gradient( startColorstr='#8dc63f', endColorstr='#78a934',GradientType=0 );}nav ul li a.active { color: #fff;}nav ul li a span.arrow { background: url(../../../images/nav/arrow-down.png) no-repeat 50% 50%; width: 9px; height: 9px; display: inline-block; overflow: hidden; margin-left: 10px; text-indent: -999em;}nav ul li ul li a span.arrow { text-align: right; text-indent: -999em; display: block; position: absolute; overflow: hidden; width: 9px; height: 9px; top: 16px; left: 100px; margin-left: 20%; background: url(../../../images/nav/arrow-right.png) no-repeat 50% 50%;}nav ul li ul li a:hover span.arrow { left: 105px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: border 0.4s ease; -o-transition: border 0.4s ease; transition: border 0.4s ease;}/* Mobile nav buttons */.nav-btn { display: block; width: 1.6em; height: 25px; padding: -11px; border: 0; outline: none; background: #87be3c url("../../../images/nav/nav-icon.svg") center center no-repeat; background-size: 1.875em 1.5em; overflow: hidden; white-space: nowrap; text-indent: 100%; filter: progidXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.no-svg .nav-btn { background-image: url("../../../images/nav/nav-icon.png");}.nav-btn:hover, .nav-btn:focus { filter: progidXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1;}.close-btn { display: block; width: 2.25em; height: 2.25em; padding: 0; border: 0; outline: none; background: url('../../../images/nav/close-btn.svg') left center no-repeat; background-size: 1.875em 1.875em; overflow: hidden; white-space: nowrap; text-indent: 100%; filter: progidXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.no-svg .close-btn { background-image: url("../../../images/nav/close-btn.png");}.close-btn:focus, .close-btn:hover { filter: progidXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1;}@media all and (min-width: 641px) {.horizontal-mobile-nav { display: none;}} /* END MEDIA QUERY FOR MIN-WIDTH 641PX (DESKTOP/TABLET) */@media all and (max-width: 640px) {/* 3.0 MOBILE-NAV STYLES-------------------------------*//* SET VISIBLE THE HORIZONTAL MOBILE NAV */#nav* {display: none !important;} /* IMPORTANT, PREVENTS NAV FROM FLASHING ON MOBILE */.nav-container { /* THIS HAS BEEN RESET BELOW */ /*overflow: hidden;*/ height: 42px; /* height compensating for outer-border */ border: 1px solid #dfdfdf; /* Outer grey border */ border-radius: 5px;}.horizontal-mobile-nav { display: block; height: 40px; /* height compensating to get white and grey border */ border: 1px solid #fff; /* Inner white border */ border-radius: 5px; /* rounded borders */ filter: progidXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3'); -ms-filter: "progidXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3')"; background-image: -moz-linear-gradient(top, #fefefe, #f3f3f3); background-image: -ms-linear-gradient(top, #fefefe, #f3f3f3); background-image: -o-linear-gradient(top, #fefefe, #f3f3f3); background-image: -webkit-gradient(linear, center top, center bottom, from(#fefefe), to(#f3f3f3)); background-image: -webkit-linear-gradient(top, #fefefe, #f3f3f3); background-image: linear-gradient(top, #fefefe, #f3f3f3);}.horizontal-mobile-nav ul { position: absolute; /* allows us to absolute position the subnavs */ z-index: 10; display: block; width: 100%; height: 40px; /*height of inner nav for white border */ padding: 0; margin: 0;}.horizontal-mobile-nav ul > li { position: relative; /* added */ display: inline-block; height: 40px; padding: 0; margin: 0 0 0 -4px;}.horizontal-mobile-nav ul li:nth-child(1) { margin-left: 0px; border-radius: 5px 0px 0px 5px;}.horizontal-mobile-nav ul li a { color: #777; text-decoration: none; display: block; height: 24px; padding: 8px 16px; margin: 0;}.horizontal-mobile-nav > ul > li:nth-child(1) > a { /* FIX ROUNDED EDGE FOR FIRST A HOVER STATE */ border-radius: 5px 0px 0px 5px;}/* RESET THE ABOVE STYLES IN PREPARATION FOR THE MOBILE NAV THIS HAS TO BE A MEDIA QUERY */nav { height: auto; border: none; border-radius: 0; background-image: none); }nav ul { position: relative; z-index: 10; display: block; width: auto; height: auto; padding: 0; margin: 0; }nav ul > li { position: relative; display: block; height: auto; padding: 0; margin: 0; }nav ul li:nth-child(1) { margin-left: 0; border-radius: none; }nav ul li a { color: #777; text-decoration: none; display: block; height: auto; padding: 0; margin: 0; }nav ul li a:visited { color: #777; }nav > ul > li:hover > a { color: #fff; text-decoration: none; background-image: none;}nav > ul > li:nth-child(1) > a { border-radius: 0; }/* Sub nav styles start here */nav ul li > ul { position: relative; display: block; z-index: 1; width: auto; height: auto; top: 0; left: 0; border: none; background: none; }nav ul li ul li { position: relative; height: auto; display: block; padding: 0; margin: 0; border: none; }nav ul li ul li a { color: #777; height: auto; padding: 0; margin: 0; background: none; }nav ul li ul li a:hover { color: #777; text-decoration: none; background: none; border-left: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }/* SECOND LEVEL SUB NAV STYLES */nav ul li ul li ul { position: relative; display: block; z-index: 1; width: auto; height: auto; top: 0; left: 0; border: none; background: none; }nav ul li .active { color: #fff; background: none; }/* Mobile Nav styles */ /* actual media query stuff from old nav */nav ul li a span.arrow { display: none;}nav ul li ul li a span.arrow { display: none;}#nav { position: absolute; top: 0; padding-top: 100px;}#nav:nottarget) { /* not sure what this does */ z-index: 1; height: 0;}#nav:target .close-btn { display: block;}#nav .close-btn { position: absolute; top: 20px; left: 40px;}#nav .block { position: relative; padding: 0;}#nav > ul { border-bottom: 1px solid #444; box-shadow: 0px 15px 15px rgba(8, 8, 8, 0.75);}#nav li { position: relative; padding: 0; margin: 0;}#nav ul li:last-child {}#nav ul li ul li:last-child { border-bottom: none;}#nav li.is-active:after { /* NOT SURE IF THIS DOES A FUCKIN THING */ z-index: 50; display: block; content: ""; position: absolute; top: 50%; right: -0.031em; margin-top: -0.625em; border-top: 0.625em transparent solid; border-bottom: 0.625em transparent solid; border-right: 0.625em white solid;}#nav li a { /* BUTTON STYLES AND SIZE */ text-decoration: none; padding: 10px 0 10px 20px; border-top: 1px solid #444; border-bottom: 1px solid #222; }#nav ul li a { background: #222222; background: -moz-linear-gradient(left, #222222 0%, #222222 40%, #000000 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#222222), color-stop(40%,#222222), color-stop(100%,#000000)); background: -webkit-linear-gradient(left, #222222 0%,#222222 40%,#000000 100%); background: -o-linear-gradient(left, #222222 0%,#222222 40%,#000000 100%); background: -ms-linear-gradient(left, #222222 0%,#222222 40%,#000000 100%); background: linear-gradient(to right, #222222 0%,#222222 40%,#000000 100%); filter: progidXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#000000',GradientType=1 ); opacity: 0.8; -ms-filter: progidXImageTransform.Microsoft.Alpha(Opacity = 80); filter: alpha(opacity = 80);}#nav li a:hover { color: #fff; opacity: 0.4; -ms-filter: progidXImageTransform.Microsoft.Alpha(Opacity = 40); filter: alpha(opacity = 40);}#nav ul li ul li a { /* INDENT SUBNAV ITEMS */ padding-left: 35px;}#nav ul li ul li a:hover {}#nav ul li ul li ul li a { padding-left: 50px;}#nav ul li ul li ul li a:hover {}/* crazy shit */.js-ready #nav { height: 100%; width: 70%; background: url(../../../images/nav/hixs_pattern_evolution.png); -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);}.js-ready #nav .block { background: transparent;}.js-ready #nav .close-btn { display: block; filter: progidXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7;}.js-ready #nav .close-btn:focus, .js-ready #nav .close-btn:hover { filter: progidXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1;}.js-ready #nav { /* move the nav off canvas */ left: -70%;}.js-ready #canvas { left: 0;}.js-nav #inner-wrap { left: 70%;}.csstransforms3d.csstransitions.js-ready #nav { left: 0; -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden;}.csstransforms3d.csstransitions.js-ready #inner-wrap { left: 0 !important; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: -webkit-transform 500ms ease; -moz-transition: -moz-transform 500ms ease; -o-transition: -o-transform 500ms ease; transition: transform 500ms ease; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden;}.csstransforms3d.csstransitions.js-nav #inner-wrap { -webkit-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1); -moz-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1); -ms-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1); -o-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1); transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);}.csstransforms3d.csstransitions.js-ready #nav .block { filter: progidXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; -webkit-transition: opacity 300ms 100ms, -webkit-transform 500ms ease; -webkit-transition-delay: ease, 0s; -moz-transition: opacity 300ms 100ms ease, -moz-transform 500ms ease; -o-transition: opacity 300ms 100ms ease, -o-transform 500ms ease; transition: opacity 300ms 100ms ease, transform 500ms ease; -webkit-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9); -moz-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9); -ms-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9); -o-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9); transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9); -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%;}.csstransforms3d.csstransitions.js-nav #nav .block { filter: progidXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}#nav {display: block !important;} /* IMPORTANT, MAKES NAV VISIBLE AGAIN AFTER FLASH FIX ABOVE */}\[/code\]