I have been searching for the answer to this for a little while now. I am using the Bootstrap framework to create a portfolio website. I have completed my index.html with a fixed-top navbar:
This is the home page. The top shows the navbar.
This navbar has links to a "bio" page, a "projects" dropdown menu, and a "contact" page. I have created separate html pages for each of these (ex: I have index.html, bio.html, contact.html, video.html, design.html, etc.). However, when I press the links, they do not show the navbar, nor any other formatting.
I have this code for the graphic design html:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Graphic Design</title>
</head>
<body>
<h1>Graphic Design</h1>
<p>Creating</p>
</body>
</html>
And this is what shows up: graphicdesign.html page
I wanted to know if there is a way to have the navbar consistent on every HTML page in a project.
I have seen this: Bootstrap Navbar in multiple pages but I am having a hard time loading it using jQuery.
I have also seen this: Do I have to duplicate the navbar code on every page with Bootstrap? but I don't want to use PHP.
Thank you for your time.
I have been searching for the answer to this for a little while now. I am using the Bootstrap framework to create a portfolio website. I have completed my index.html with a fixed-top navbar:
This is the home page. The top shows the navbar.
This navbar has links to a "bio" page, a "projects" dropdown menu, and a "contact" page. I have created separate html pages for each of these (ex: I have index.html, bio.html, contact.html, video.html, design.html, etc.). However, when I press the links, they do not show the navbar, nor any other formatting.
I have this code for the graphic design html:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Graphic Design</title>
</head>
<body>
<h1>Graphic Design</h1>
<p>Creating</p>
</body>
</html>
And this is what shows up: graphicdesign.html page
I wanted to know if there is a way to have the navbar consistent on every HTML page in a project.
I have seen this: Bootstrap Navbar in multiple pages but I am having a hard time loading it using jQuery.
I have also seen this: Do I have to duplicate the navbar code on every page with Bootstrap? but I don't want to use PHP.
Thank you for your time.
Share Improve this question edited May 23, 2017 at 12:09 CommunityBot 11 silver badge asked Jan 28, 2017 at 23:54 AbbyAbby 1111 gold badge1 silver badge4 bronze badges3 Answers
Reset to default 9First off, I congratulate you on your question.
It addresses one of the fundamental needs and most important principles in programming: DRY, which is the main reason behind the development and implementation of most common web technologies, such as php or CSS (which can be further DRY-ed by LESS or SASS).
php, for example, was invented and instantly widely adopted mostly because of this "very cool new (at the time) feature": All you had to do was change the extension from .html to .php and you were able to include other parts using:
<?php include "part.html"; ?>
Usually referenced as template/component loading, this is also a common task using JavaScript. Quite a few libraries provide it. For example jQuery provides $.load() while AngularJS enables you to use directives to include templates, which could either be defined as inline or external HTML. In fact, all package dependency managers and all frameworks provide it in a form or another, because today's web is unthinkable without reusable components.
If you want to find more options, I suggest you start searching for combinations of html, include, templates, loading and components.
Be warned, most JavaScript libraries come with overhead. The most popular, however, usually provide some flexibility, allowing you to selectively build only the functionality you want.
Including templates will, most probably, become part of core HTML if (and when) Microsoft's HTML Components submission to the World Wide Web Consortium will be adopted, using the <component> tag.
Currently, this is possible using AngularJSs type:"E" directives.
In order to include your navbar in every page you have to use either php or javascript. Otherwise you will simply have to copy paste the html mark-up in every page. just try this two steps--
HTML
<div class="container-fluid" id="footer">
</div>
JAVASCRIPT
<script type="text/javascript">
$(function(){
$("#footer").load("footer.html");
});
</script>
NOTE:
Make sure you are not adding bootstrap CDN s in the footer.html file.
Edit
As mentioned in the comment by andrei, yes it is very important to know that my answer requires jquery.
In order to use jquery you need to use the following cdn in your head tag or you can download jquery and serve it from your own file system.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Since the title of the question is attracting people interested in Bootstrap nav-bar, here is a demonstration for a nav-bar. Both Bootstrap and jQuery are assumed.
My main point is to show how to correctly activate the nav-bar link which must be different in each page.
nav-bar.html
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">
<img alt="Brand" src="icon.png">
<span class=px-2>My Site</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item ">
<a class="nav-link" href="#">Home Page </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page2</a>
</li>
</ul>
</div>
</nav>
Now put the following code into the <head> section of each page that should show the nav-bar.
Pay attention to the li:nth-child(2) part. The number should be adapted in each html source according to its position in the nav-bar.
<script type="text/javascript">
window.onload = function(){
$.get("navbar.html", function(data){
$("#common-navbar").html(data);
$('.navbar-nav').find('li:nth-child(2)')
.addClass('active')
.find('a').append('<span class="sr-only">(current)</span>');
});
}
</script>
What is left now is to start each page with a div into which the nav-bar will be loaded:
<body>
<div id="common-navbar"></div>