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
Post a Comment