How to change page and maintain the nav bar

Question

i wrote a html script with a simple navbar. The main page is fine but when i click on "About" the page reload and i just want to reload the content and maintain the navbar. I'm using bootstrap. How can i do this?

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse" ng-controller="HeaderController">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="file:///path/about.html">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul> 
    </div>
  </div>
</nav>
<div class="container">
  <!-- <form class="form-horizontal" action="/action_page.php"> -->
  <div class="row">
    <div class="col-*-10">
      <legend><h2>Title</h2></legend>
    </div>
  </div>
  <p>HOME!!!</p>
</div>
</body>
</html>

And this is my about page:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <p>ABOUT!!!!!!!!!!!!!!!!!</p>
</body>
</html>

If you are using plain html css then you have to copy and paste the whole navigation elements again with its stylesheets — Julian Espinosa, May 25 '17 at 15:55
Check this https://stackoverflow.com/questions/31954089/html-css-navigation-bar-on-multiple-pages — Julian Espinosa, May 25 '17 at 16:04

score 1 · Answer 1 · answered May 26 '17 at 07:16

You're actually supposed to implement such a thing using a router, ui-bootstrap is just a UI library. The ui-router wiki explains how to accomplish this using multiple views per state.

Let's say we have two states in which we want to have a shared navbar, than define 2 states and provide each with 2 views, one navbar and another for the body

Provide each navbar view the same controller and template

    $stateProvider      
      .state('stateA',{     
        views: {        
          'navbar@stateA': {        
            templateUrl: 'navbar.html', // <-- navbar html goes here    
            controller: 'navbarCtrl'        
          },        
          'body@stateA': {      
            templateUrl: 'report-table.html',       
            controller: 'StateACtrl'
          } 
        }       
      })
       .state('stateB',{        
        views: {        
          'navbar@stateB': {        
            templateUrl: 'navbar.html',     
            controller: 'navbarCtrl'    
          },        
          'body@stateB': {      
            templateUrl: 'report-table.html',       
            controller: 'StateBCtrl'    
          } 
        }       
      })

Inside your markup, you should maintain

<body>
    <!-- the router will replace this with your html files -->
    <div ui-view="navbar"></div>        
    <div ui-view="body"></div>  
</body>

score 0 · Answer 2 · answered May 25 '17 at 16:03

On the open body tag, make a javascript function named start onLoad="start()" Then within the function set the innerhtml the navbar code.

HTML:

<body onLoad="start()">
   <div id="navbar"></div>
</body>

JS:

          function start() {
    document.getElementById("navbar").innerHTML = "<nav class="navbar navbar-inverse" ng-controller="HeaderController">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="file:///path/about.html">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul> 
    </div>
  </div>
</nav>";
        }

score 0 · Answer 3 · answered May 25 '17 at 16:04

There are a couple ways to do this without copying the whole navigation bar into every HTML file.

You can put all of the content in the same page and use JavaScript to hide/show specific sections when you click on the menu link
You can use JavaScript to retrieve the new content via AJAX and update the container.
You can add JavaScript to create the navigation bar on the fly for each page you want it on.

How to change page and maintain the nav bar

3 Answers3