html - CSS not showing on Bootstrap Navbar -
i tried using code on main bootstrap page using bootstrap generator. html works css not. i'm not sure problem is. seems classes right me. appreciate advice. here code:
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="./">bootstrap 3 menu generator</a> </div> <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"> <ul class="nav navbar-nav"> <li> <a href="#">getting started</a> </li> <li class="dropdown"> <a class="dropdown-toggle" href="#" data-toggle="dropdown">dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li><a href="#">separated link</a></li> <li><a href="#">one more separated link</a></li> </ul> </li> <li> <a href="#">components</a> </li> <li> <a href="#">javascript</a> </li> <li class="active"> <a href="#">customize</a> </li> </ul> </nav> </div> </header> css:
.navbar-inverse { background-color: #222222} .navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color: #} .navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: #080808} .dropdown-menu { background-color: #ffffff} .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #428bca} .navbar-inverse { background-image: none; } .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none; } .navbar-inverse { border-color: #080808} .navbar-inverse .navbar-brand { color: #999999} .navbar-inverse .navbar-brand:hover { color: #ffffff} .navbar-inverse .navbar-nav>li>a { color: #999999} .navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #ffffff} .navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #ffffff} .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #ffffff} .dropdown-menu>li>a { color: #333333} .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #ffffff} .navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #999999} .navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #ffffff} .navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #999999} .navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #ffffff} here head code:
<head> <meta charset="utf-8"> <!-- use .htaccess , remove these lines avoid edge case issues. more info: h5bp.com/b/378 --> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <title>hello</title> <meta name="description" content=""> <meta name="author" content=""> <!-- mobile viewport optimized: j.mp/bplateviewport --> <meta name="viewport" content="width=device-width,initial-scale=1"> <!-- place favicon.ico , apple-touch-icon.png in root directory: mathiasbynens.be/notes/touch-icons --> <!-- css: implied media=all --> <!-- css concatenated , minified via ant build script--> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-theme.css"> <link rel="stylesheet" href="css/bootstrap-theme.min.css"> <!-- end css--> <!-- more ideas <head> here: h5bp.com/d/head-tips --> <!-- javascript @ bottom, except modernizr / respond. modernizr enables html5 elements & feature detects; respond polyfill min/max-width css3 media queries optimal performance, use custom modernizr build: www.modernizr.com/download/ --> <script src="js/libs/modernizr-2.0.6.min.js"></script> </head>
your custom styles style.css should come after bootstrap styles in page <head>.
side note: performance reasons, shouldn't use both bootstrap.css , bootstrap.min.css @ same time. making client download styles twice! should use minified version on production environments.
the same applies on bootstrap-theme.css , bootstrap-theme.min.css.
Comments
Post a Comment