css - Bootstrap 3: Collapsable Menu's z-Index -
my test site @ link...
when page width below 768px, how navicon menu show above else?
following navbar , colornavbar css files:
---start navbar.css--
/* <nav> tag, classes: navbar & navbar-default */ .navbar{ display: block; margin-bottom: 20px; } .navbar-default{ background:#317ca2; background:-o-linear-gradient(top, #3f94bf, #246485); background:-ms-linear-gradient(top, #3f94bf, #246485); background:-moz-linear-gradient(top, #3f94bf, #246485); background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #3f94bf), color-stop(1, #246485)); background:-webkit-linear-gradient(#3f94bf, #246485); background:linear-gradient(top, #3f94bf, #246485); -moz-box-shadow:0 1px 5px rgba(34,34,34,0.5); -webkit-box-shadow:0 1px 5px rgba(34,34,34,0.5); box-shadow:0 1px 5px rgba(34,34,34,0.5); width:100%; max-width:none; height:50px; margin:0; padding:0; border-bottom:1px solid #1b5572; color: white; display: block; position: relative; } a.navbar-brand{ color: white; } /* <ul> tag, classes: nav & navbar-nav */ /* collapsed menu links */ .navbar-default .navbar-nav > li > { color: white; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: yellow; } @media (max-width: 768px) { .navbar-header { float: none; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .navbar-collapse.collapse { display: none!important; } .navbar-nav { float: none!important; margin: 7.5px -15px; } .navbar-nav>li { float: none; } .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; } }
--end colornavbar.css--
thanks!
updated after update code, change @media
in navbar.css
@media (max-width: 767px) { /*-- change max-width 768 767 --*/ .navbar-header { float: none; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } /*.navbar-collapse.collapse { display: none!important; }*/ /*-- disable this, suggest remove - cause menu disappear toogle in --*/ .navbar-nav { float: none!important; margin: 7.5px -15px; position:relative; /*-- new attribute --*/ z-index:9999; /*-- new attribute --*/ background-color:#393939; /*-- new attribute --*/ } .navbar-nav>li { float: none; } .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; }
}
hope help!
Comments
Post a Comment