Twitter Bootstrap Question posted in

Navbar doesn't collapse properly in bootstrap 3 – Twitter bootstrap

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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IMC chile &copy; 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;">[email protected]</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>
Tags:

2

Answers


  1. 0

    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

    Side Bar Fiddle

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search