.nav { padding-left: 0; margin-bottom: 0; list-style: none; } .nav > li { position: relative; display: block; padding-right: 5px; } .nav > li > a { position: relative; display: block; padding: 10px; } .nav > li > a:hover, .nav > li > a:focus { text-decoration: none; background-color: #eee; } .nav > li.disabled > a { color: #777; } .nav > li.disabled > a:hover, .nav > li.disabled > a:focus { color: #777; text-decoration: none; cursor: not-allowed; background-color: transparent; } .nav .nav-divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5; } .nav > li > a > img { max-width: none; } /* navbar */ .navbar { position: relative; min-height: 50px; margin-bottom: 0; /* border: 1px solid transparent; */ font-weight: bold; border: 0; } .navbar-header { display: block; padding-right: 15px; } .navbar-header:after { content: " "; clear: both; display: block; visibility: hidden; height: 0px; } .navbar-collapse { padding-right: 15px; padding-left: 15px; overflow-x: visible; -webkit-overflow-scrolling: touch; /* -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); */ } .navbar-static-top { z-index: 1000; border-width: 0 0 1px; } .navbar-fixed-top, .navbar-fixed-bottom { position: fixed; right: 0; left: 0; z-index: 1030; } .navbar-fixed-top { top: 0; border-width: 0 0 1px; } .navbar-fixed-bottom { bottom: 0; margin-bottom: 0; border-width: 1px 0 0; } .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { max-height: 400px; overflow-y: auto; } /* navbar-link */ .navbar-link { display: inline-block; float: none; height: 50px; padding: 0; font-size: 18px; line-height: 20px; vertical-align: middle; } .navbar-link:hover, .navbar-link:focus { text-decoration: none; } .navbar-link > img { display: block; } /* navbar-toggle */ .navbar-toggle { position: relative; float: right; padding: 8px 6px; margin-top: 8px; margin-bottom: 8px; background-color: transparent; background-image: none; border: 0; /* border: 1px solid transparent; */ /* border-radius: 4px; */ } .navbar-toggle:focus { outline: 0; } .navbar-toggle .icon-bar { display: block; width: 22px; height: 2px; border-radius: 1px; } .navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; } /* navbar-nav-wrapper */ .navbar-nav-wrapper { margin-top: 0; text-align: left; } /* navbar-nav */ .navbar-nav { margin: 0; } .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; line-height: 20px; } .navbar-text { margin-top: 15px; margin-bottom: 15px; } /* navbar-nav-right */ .navbar-nav-right { float: right; } /* navbar-light */ .navbar-light { background-color: #DDDFE6; border-color: red; } .navbar-light .navbar-link { color: #777; } .navbar-light .navbar-link:hover, .navbar-light .navbar-link:focus { color: #5e5e5e; background-color: transparent; } .navbar-light .navbar-text { color: #777; } .navbar-light .navbar-nav > li > a { color: #777; } .navbar-light .navbar-nav > li > a:hover, .navbar-light .navbar-nav > li > a:focus { color: #333; background-color: transparent; } .navbar-light .navbar-nav > .active > a, .navbar-light .navbar-nav > .active > a:hover, .navbar-light .navbar-nav > .active > a:focus { color: #555; background-color: #e7e7e7; } .navbar-light .navbar-nav > .disabled > a, .navbar-light .navbar-nav > .disabled > a:hover, .navbar-light .navbar-nav > .disabled > a:focus { color: #ccc; background-color: transparent; } .navbar-light .navbar-toggle { border-color: #ddd; } .navbar-light .navbar-toggle:hover, .navbar-light .navbar-toggle:focus { background-color: #eee; } .navbar-light .navbar-toggle .icon-bar { background-color: #888; } .navbar-light .navbar-collapse { border-color: #e7e7e7; } .navbar-light .navbar-link { color: #777; } .navbar-light .navbar-link:hover { color: #333; } /* navbar-dark */ .navbar-dark { background-color: #647CC6; } .navbar-dark .navbar-link { color: #9d9d9d; } .navbar-dark .navbar-link:hover, .navbar-dark .navbar-link:focus { color: #fff; background-color: transparent; } .navbar-dark .navbar-text, .navbar-dark .navbar-nav > li > a { color: #E0E0E0; } .navbar-dark .navbar-nav > li > a:hover, .navbar-dark .navbar-nav > li > a:focus { color: #fff; background-color: transparent; } .navbar-dark .navbar-nav > .active > a, .navbar-dark .navbar-nav > .active > a:hover, .navbar-dark .navbar-nav > .active > a:focus { color: #fff; background-color: #080808; } .navbar-dark .navbar-nav > .disabled > a, .navbar-dark .navbar-nav > .disabled > a:hover, .navbar-dark .navbar-nav > .disabled > a:focus { color: #444; background-color: transparent; } .navbar-dark .navbar-toggle { border-color: #333; } .navbar-dark .navbar-toggle:hover, .navbar-dark .navbar-toggle:focus { background-color: #333; } .navbar-dark .navbar-toggle .icon-bar { background-color: #fff; } .navbar-dark .navbar-collapse { border-color: #101010; } /* media */ @media (min-width: 768px) { .navbar-toggle { display: none; } .navbar-header { float: left; } .navbar-collapse { width: auto; border-top: 0; -webkit-box-shadow: none; box-shadow: none; } .navbar-collapse.collapse { display: block !important; height: auto !important; padding-bottom: 0; overflow: visible !important; } .navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { padding-right: 0; padding-left: 0; } .navbar-nav { float: left; margin: 0; } .navbar-nav > li { float: left; } .navbar-nav > li > a { padding-top: 15px; padding-bottom: 15px; } } @media (max-device-width: 480px) and (orientation: landscape) { .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { max-height: 240px; overflow-y: auto; } }