Why did my #wrapDesktopNavBar disappear on desktop view? - css

Question

The following is my css. i'm not sure why when i open up my website on dekstop view, my #wrapDesktopNavBar does not show. Please help me look at it thanks :)
#media screen and (min-width: 800px) {
/* Navigation bar (blank) settings */
#wrapDesktopNavBar {
visibility: visible;
width: 100%; /*Sets the width*/
height: 70px; /*Sets the height*/
top: 0%; /*Sets the distance from the top*/
position: relative; /*Fixes the bar at the designated position*/
background-color: #ffffff; /*Sets the background color to white*/
font-family: Helvetica, Arial, sans-serif; /*Sets the font of the headers*/
z-index: 1; /*Sets as 1 to be the top layer, bottom layers should use small index number, vice versa*/
}}
#wrapDesktopNavBar {
height: 100%;
background-color: #315AA9;
position: fixed;
width:80%;
top:0%;
overflow-y:auto;
overflow-x: hidden;
visibility: hidden;
z-index: 100;
}

Answer 1

You are using #media query in your CSS, so the above bit of code has two declarations of the same id so you need to close the media query block so that it excludes the general style block
#media screen and (min-width: 800px) {
/* Navigation bar (blank) settings */
#wrapDesktopNavBar {
visibility: visible;
width: 100%;
height: 70px;
top: 0%;
position: relative;
background-color: #ffffff;
font-family: Helvetica, Arial, sans-serif;
z-index: 1;
}
} /* Close this here */
/* Other styles goes out of the box */
The order of your declarations matter there, even if the first condition is satisfied, the general CSS property block will override the media query block, inorder to prevent that, just place the media query at the end of your CSS file.
Also, you are using visibility: hidden; so even if you close the #media query box and if the viewport width exceeds 800px; your element having an id wrapDesktopNavBar won't be visible.
Demo (Resize the fiddle window to see the effect, tinkered with media query width and color for demo purposes)