I am making a mobile responsive site with Bootstrap 3.3.4. I will be making it with server side includes when I can get the web.config file written up since I am using an IIS server.
This is what the nav bar looks like with just the bar. This is what I want it to look like.
Does Bootstrap not like PHP?
http://hurricanetracking.us/nav.html
Other elements on the page. http://hurricanetracking.us/new.php
<nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Hurricane Tracking</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="index.php">Home</a></li> <li><a href="cat.php">Category Information</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Current <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="Ana.php">Ana</a></li> <!--<li><a href="Bill.php">Bill</a></li> <!--<li><a href="Claudette.php">Claudette</a></li> <!--<li><a href="Danny.php">Danny</a></li> <!--<li><a href="Erika.php">Erika</a></li> <!--<li><a href="Fred.php">Fred</a></li>--> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Historical <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="Ana.php">Ana</a></li> <!--<li><a href="Bill.php">Bill</a></li> <!--<li><a href="Claudette.php">Claudette</a></li> <!--<li><a href="Danny.php">Danny</a></li> <!--<li><a href="Erika.php">Erika</a></li> <!--<li><a href="Fred.php">Fred</a></li>--> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="signup.php"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="signin.php"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </div> </nav>
Advertisement
Answer
Remove this from index.css
.navbar{ background-color:#039; width:120px; position:fixed; left: 0px; top: 0px; float:left; }
that is what is messing it up!