Bootstrap Navbar on multiple pages

Question

Problem loading navbar.

Do I place the navigator code on each page or should I put the navigator code in one file and access it on all pages?

Answer 1

In fact, your question is not download related.

Since you are using a loader, you must use jQuery. You can use load() , which is an ajax function for this.

You can get API details here . load () | JQuery API documentation

Answer 2

The question is not really clear, but if you ask whether to use the navigation bar and dynamic site or just place the navigation bar on each page, the w / e answer you want to do is okey, both are valid choices.

Examples:

 <!-- Preloader --> <div class="page-preloader preloader-wrapp"> <img src="assets/images/snr-logo.png" alt=""> <div class="preloader"></div> </div> <!-- /Preloader --> <!-- Navbar --> <nav class="navbar-youplay navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="off-canvas" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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" href="#/"> <img src="assets/images/batman.jpg" alt="flogo"> </a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="home"><a href="#/"> <span class="glyphicon glyphicon-home"></span> <strong>Home</strong><span class="label">--->Inicio</span></a></li> <li class="av navbar-nav"><a href="#/turno/portada" class="dropdown-toggle" role="button" aria-expanded="false"> <strong>Sacar Turno</strong> <span class="label">Más información</span> </a></li> <li class="av navbar-nav"><a href="#/turno/mod" class="dropdown-toggle" role="button" aria-expanded="false"> <strong>Modificar un Turno</strong> <span class="label">Más información</span> </a></li> <li class="av navbar-nav"><a href="#/horario" class="dropdown-toggle" role="button" aria-expanded="false"> <strong>Horario</strong> <span class="label">Más información</span> </a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#/login"><span class="glyphicon glyphicon-log-in"></span> Iniciar</a></li> </ul> </div> </div> </nav> <!-- /Navbar --> <!-- Separation --> <br> <br> <br> <br> <br> <!-- /Separation --> <!-- Main Dynamic Body --> <div data-ng-view class="container"></div> <!-- /Main Dynamic Body --> <!-- Footer --> <footer> <p> Informatica y Comunicaciones SNR &copy; 2015-2016. </footer> <!-- /Footer --> <!-- Loader --> <script type="text/javascript" src="scripts/services/loader.js"></script> <!-- init loader --> <script> if (typeof youplay !== 'undefined') { youplay.init({ smoothscroll : false, }); } </script> <script type="text/javascript"> $(".countdown").each(function() { $(this).countdown($(this).attr('data-end'), function(event) { $(this).text(event.strftime('%D days %H:%M:%S')); }); }) </script> 

##

I use AngularJs and one Navbar with a container to display all the data.

Hope this helps.