0

I want my nav bar to stay collapsed at all times. I have tried looking at other examples, but when I try them, the code will make it stay collapsed, but once I click it then it will only stay open for a second till it closes back. I would also like to make it where the nav bar opens on the right hand side of the page and just cover up the website content over there until it is closed. Any ideas for that? 

 <DOCTYPE html>
    <html>
      <head>
        <title>Home</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--Bootstrap stylesheets-->
        <link rel="stylesheet" href="/Users/jordan/Desktop/My EAST Website/stylesheets/bootstrap.min.css">
        <!--Main Stylesheets-->
        <link rel="stylesheet" href="/Users/jordan/Desktop/My EAST Website/stylesheets/styles.css">
        <!--js import of bootstrap-->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="js/bootstrap.js"></script>

    </head>
    <body>
        <!--Top Navigation Bar-->
<nav class="navbar navbar-inverse always-open">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Name</a>
        <button type="button" class="navbar-toggle" 
                data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</nav>

        <!--end of nav bar-->
    </body>
</html>
Siguza
  • 21,155
  • 6
  • 52
  • 89
Jordan Washburn
  • 1
  • Using just your HTML with the Bootstrap framework, I'm not seeing the behaviour you describe. Could you provide all code necessary to recreate the problem? http://www.bootply.com/311fJ0FNdB – Serlite May 20 '15 at 17:43
  • It's not a behavior, I just want it to stay in the collapsed design at all widths instead of just at small widths. – Jordan Washburn May 20 '15 at 18:00
  • Unless you start working with the LESS files in Bootstrap, you'll need to individually override each CSS rule applied to navbar components after the breakpoint for larger screens. So your first task would be to identify what these styles are, and then define new styles that return them to their default (non-large screen) values. – Serlite May 20 '15 at 20:17
  • 1
    Consider reviewing [this answer](http://stackoverflow.com/questions/22462142/how-to-keep-bootstrap-3-navbar-as-collapsed-for-all-screen-sizes) to begin with. – Serlite May 20 '15 at 20:20

0 Answers0