Navbar doesn't collapse properly in bootstrap 3
Question
The navbar works properly in full screen, but when i make the window small the toggle options doesn´t show correctly.
Was wondering if anyone knew how to fix it.
here is the css of the navbar
.navbar { border-radius: 0; } .navbar-new { background-color: white; height: 120px; padding-left: 20px; } .navbar-new .navbar-brand, .navbar-new .navbar-brand:hover, .navbar-new .navbar-brand:focus { color: #FFF; } .navbar-new .navbar-nav > li > a { color: #FFF; } .navbar-new .navbar-nav > li > a:hover, .navbar-new .navbar-nav > li > a:focus { background-color: #fcf8e3; } .navbar-new .navbar-nav > .active > a, .navbar-new .navbar-nav > .active > a:hover, .navbar-new .navbar-nav > .active > a:focus { color: #FFF; background-color: #fcf8e3; } .navbar-new .navbar-text { color: black; } .navbar-new .navbar-toggle { border-color: #0FA6A1; } .navbar-new .navbar-toggle:hover, .navbar-new .navbar-toggle:focus { background-color: #fcf8e3; } .navbar-new .navbar-toggle .icon-bar { background-color: #FFF; }`enter code here` .navbar-new .navbar-toggle .icon-bar { background-color: #FFF; } And Here is the html file
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="footer, address, phone, icons" /> <title>IMC chile</title> <!-- Bootstrap Core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Custom CSS --> <link href="css/index.css" rel="stylesheet"> <link href="css/navbar.css" rel="stylesheet"> <link href="css/footer.css" rel="stylesheet"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> <link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css"> <!-- bxSlider CSS file --> <link href="css/jquery.bxslider.css" rel="stylesheet" /> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- Navigation --> <nav class="navbar navbar-new navbar-fixed-top" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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" style="color:black;" href="index.html"><img class="img-responsive" width="100%;" max-height="100px;" src="img/logo/logosmall.jpg" alt=""></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <div id="nav"> <ul class="nav navbar-nav"> <li> <a href="sobre_nosotros.html" style="color:black;"><b>Sobre Nosotros</b></a> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" style="color:black;" aria-haspopup="true" aria-expanded="false"><b>Productos</b> <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="ropaindex.html">IMCtext</a></li> <li><a href="#">IMCplastic</a></li> <li><a href="#">IMCcontención</a></li> <li role="separator" class="divider"></li> <li><a href="#">Absorventes</a></li> </ul> </li> <li> <a href="#" style="color:black;"><b>Contacto</b></a> </li> </ul> </div> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav> <!-- Page Content --> <!-- carousel --> <header> </header> <div id="myCarousel" class="carousel slide"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for Slides --> <div class="carousel-inner"> <div class="item active"> <!-- Set the first background image using inline CSS below. --> <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div> <div class="carousel-caption"> <h2>Caption 1</h2> </div> </div> <div class="item"> <!-- Set the second background image using inline CSS below. --> <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div> <div class="carousel-caption"> <h2>Caption 2</h2> </div> </div> <div class="item"> <!-- Set the third background image using inline CSS below. --> <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div> <div class="carousel-caption"> <h2>Caption 3</h2> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="icon-next"></span> </a> </div> <!-- IMC secciones --> <div class="container" id="nuestrosclientes"> <a data-toggle="modal" data-target="#myModal"><img class="img-responsive" width="100%;" src="http://placehold.it/1000x200" alt=""> </a> <a data-toggle="modal" data-target="#myModal"><img class="img-responsive" width="100%;" src="http://placehold.it/1000x200" alt=""> </a> <a data-toggle="modal" data-target="#myModal"><img class="img-responsive" width="100%;" src="http://placehold.it/1000x200" alt=""> </a> <hr> <h1><b>Nuestros clientes</b></h1> <hr> <!-- Title --> <div class="container"> <ul class="bxslider"> <li><img src="img/clientes/14.jpg" /></li> <li><img src="img/clientes/15.jpg" /></li> <li><img src="img/clientes/16.jpg" /></li> <li><img src="img/clientes/17.jpg" /></li> <li><img src="img/clientes/18.jpg" /></li> </ul> </div> <!-- /.row --> </div> <!-- FOOTER --> <footer class="footer-distributed"> <div class="footer-left"> <div class="container"> <img class="img-responsive" src="img/logo/logosmall.jpg" alt=""> <br> <p class="footer-company-name"> IMC chile © 2016</p> </div> </div> <div class="footer-center"> <div> <i class="fa fa-map-marker"></i> <p style="color:black;"><span>La Senda de Don Juan Francisco 5300,</span> Peñalolén, Santiago.</p> </div> <div> <i class="fa fa-phone"></i> <p style="color:black;">+56 9 5688 6169</p> </div> <div> <i class="fa fa-envelope"></i> <p style="color:black;">ventas@imcchile.cl</p> </div> </div> <div class="footer-right"> <p style="color:black;" class="footer-company-about"> <span style="color:black;">Sobre la compañia</span> Comercializadora Importadora y Exportadora IMC Chile Limitada. <br>Rut: 76.296.444-9. </p> <div class="footer-icons"> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> <a href="#"><i class="fa fa-github"></i></a> </div> </div> </footer> <!-- /.container --> <!-- jQuery --> <script src="js/jquery.js"></script> <script src="js/jquery.bxslider.min.js"></script> <!-- Bootstrap Core JavaScript --> <script src="js/bootstrap.min.js"></script> <!-- carousel script --> <script type="text/javascript"> $(document).ready(function(){ $('.bxslider').bxSlider({ slideWidth: 600, minSlides: 2, maxSlides: 3, slideMargin: 10, speed: 1000 }); }); </script> </body> </html>
2 answers
solution1
0 2016-10-06 17:00:34
Hello try the below Html for navbar I just edited some classes for bootstrap and it seems working .Hope It helps you. "Just ignore the code see the fiddle below" .
<div class="collapse navbar-collapse" id="myNav">
<ul class="nav navbar-nav">
<li>
<a href="sobre_nosotros.html" style="color:black;"><b>Sobre Nosotros</b></a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data- toggle="dropdown" href="#"
role="button" style="color:black;" aria-haspopup="true" aria-
expanded="false"><b>Productos</b> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="ropaindex.html">IMCtext</a>
</li>
<li><a href="#">IMCplastic</a></li>
<li><a href="#">IMCcontención</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Absorventes</a></li>
</ul>
</li>
<li>
<a href="#" style="color:black;">
<b>Contacto</b></a>
</li>
</ul>
</div>
See the below Fiddle
solution2
0 2016-10-06 17:43:36
Well, if you add, for example, background-color: #fff to nav with the class "navbar ", you will have the desired result - a text with a color behind. But I think the problem is that you've overridden some bootstrap classes or missed adding one to your html code. Moreover your next problem (after background-color) will be fixing the position of the navbar, so it would be nicely viewable on mobile devices. Try to read this part of bootstrap documentation for more information.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap 4 navbar doesn't collapse
Bootstrap 3 navbar does't collapse properly in firefox
Bootstrap 3.3.7 navbar collapse doesn't work
Bootstrap 5 navbar button collapse doesn't work
Bootstrap navbar collapse doesn't work
Navbar Collapse not working properly in Bootstrap
Bootstrap collapse effect doesn't work properly
bootstrap 4 navbar collapse doesn't work (with JQuery - popper - bootstrap
Bootstrap navbar doesn't show properly
Twitter bootstrap navbar collapse works but doesn't return
Related Tags