1 Reply Latest reply on Aug 31, 2014 5:11 AM by BenPleysier

    Twitter Bootstrap 3 -How do you make navbar not collapse-

    Alex4555 Level 1

      I do not need my navbar to be adjust to the screen. I just want it to stay static. Is there any way this happen? Is there any way to make it easier for me to adjust the way that my navbar behaves in twitter bootstrap 3? I bassically would to have my navbar centered until the logo hits the left side, then just become static.

       

      Here is my html:

       

      <html>

       

       

              <head>

                      <title>Bootstrap 3</title>

                      <meta name="viewport" content="width=device-width, initial-scale=1.0" />

                      <link href = "css/bootstrap.min.css" rel = "stylesheet" />

        <link href="themes/1/js-image-slider.css" rel="stylesheet" type="text/css" />

        <script src="themes/1/js-image-slider.js" type="text/javascript"></script>

        <link rel="stylesheet" type="text/css" href="style.css" />

        <script src="myscripts.js"></script>

              </head>

              <body>

       

       

      <div id="wrap><div align="center">

        <div class = "navbar navbar-inverse navbar-static-top" id = "try" >

                              <div class = "container">

       

                                      <a href = "#" class = "navbar-brand"><img src="img/logo.png" id="logo"ALIGN=LEFT /> </a>

                                 

                                      <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">

                                              <span class = "icon-bar"></span>

                                              <span class = "icon-bar"></span>

                                              <span class = "icon-bar"></span>

                                      </button>

                                   

      <div id="wrapper"> 

      <form class="navbar-form navbar-left" role="search">

          <div class="form-group">

              <input type="text" class="form-control" placeholder="Search">

          </div>

          <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>

      </form>

      </div>

        

                                      <div class = "collapse navbar-collapse navHeaderCollapse">

                                   

                                              <ul class = "nav navbar-nav navbar-right">

                                           

                                                      <li class = "active"><a href = "#">Home</a></li>

                                                      <li><a href = "#">Blog</a></li>

                                                      <li class = "dropdown">

                                                           

                                                              <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Social Media <b class = "caret"></b></a>

                                                              <ul class = "dropdown-menu">

                                                                      <li><a href = "#">Twitter</a></li>

                                                                      <li><a href = "#">Facebook</a></li>

                                                                      <li><a href = "#">Google+</a></li>

                                                                      <li><a href = "#">Instagram</a></li>

                                                              </ul>

                                                   

                                                      </li>

                                                      <li><a href = "#">About</a></li>

                                                      <li><a href = "#">Contact</a></li>

                                           

                                              </ul>

       

            </div>

          </div>

        

        </div>

      </div>

                                      </div>

                                   

                              </div>

                      </div></div>

       

       

       

       

          

       

                     <div id =centering">

        <div class="div1">

              <a href="demo1.html" class="current"></a>

          </div>

       

       

        <div id="sliderFrame">

              <div id="slider" style="text-align: center;">

                  <a href="file:///C:/Users/alex/Desktop/rootforsite/index.html" target="_blank">

                      <img src="images/firsttest.jpg" alt="Welcome to IGameX.com" />

                  </a>

                  <img src="images/image-slider-1.jpg" />

                  <img src="images/image-slider-3.jpg" alt="Trade your way to victory!" />

                  <img src="images/image-slider-4.jpg" alt="#htmlcaption" />

                  <img src="images/image-slider-5.jpg" />

              </div>

              <div id="htmlcaption" style="display: none;">

        <a href="http://www.google.com/">Click me: To start selling and trading!</a>.

              </div>

          </div>

      </div>

       

       

       

                      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

                      <script src = "js/bootstrap.js"></script>

      </div>

      </div>

              </body>

       

       

       

      </html>

        • 1. Re: Twitter Bootstrap 3 -How do you make navbar not collapse-
          BenPleysier Adobe Community Professional & MVP

          Sorry, you have too many errors in your markup for me to spend time on deciphering. The following is a menu-bar that collapses.

          <!doctype html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>Untitled Document</title>

          <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />

          <style>

          body {

              padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */

          }

          </style>

          </head>

           

          <body cz-shortcut-listen="true">

          <div class="navbar navbar-inverse navbar-fixed-top">

              <div class="navbar-inner">

                  <div class="container">

                      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

                      <a class="brand" href="#">Project name</a>

                      <div class="nav-collapse collapse">

                          <ul class="nav">

                              <li class="active"><a href="#">Home</a></li>

                              <li><a href="#about">About</a></li>

                              <li><a href="#contact">Contact</a></li>

                          </ul>

                      </div>

                  </div>

              </div>

          </div>

          <div class="container main">

              <h1>Bootstrap starter template</h1>

              <p>Use this document as a way to quick start any new project.<br>

                  All you get is this message and a barebones HTML document.</p>

          </div>

          <script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script>

          <script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

          </body>

          </html>

          If you remove the highlighted parts, the menu-bar will no longer collapse.

          1 person found this helpful