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


the following css. i'm not sure why when open website on dekstop view, #wrapdesktopnavbar not show. please me @ :)

@media screen , (min-width: 800px) {   /* navigation bar (blank) settings */ #wrapdesktopnavbar  {             visibility: visible;                     width: 100%;                                    /*sets width*/     height: 70px;                                   /*sets height*/     top: 0%;                                        /*sets distance top*/     position: relative;                             /*fixes bar @ designated position*/     background-color: #ffffff;                      /*sets background color white*/     font-family: helvetica, arial, sans-serif;      /*sets font of headers*/     z-index: 1;                                     /*sets 1 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; } 

you using @media query in css, above bit of code has 2 declarations of same id need close media query block excludes general style block

@media screen , (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 here */  /* other styles goes out of box */ 

the order of declarations matter there, if first condition satisfied, general css property block override media query block, inorder prevent that, place media query @ end of css file.

also, using visibility: hidden; if close @media query box , if viewport width exceeds 800px; element having id wrapdesktopnavbar won't visible.

demo (resize fiddle window see effect, tinkered media query width , color demo purposes)


Comments

Popular posts from this blog

css - Which browser returns the correct result for getBoundingClientRect of an SVG element? -

gcc - Calling fftR4() in c from assembly -

.htaccess - Matching full URL in RewriteCond -