Menu
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.
296
Yes, absolutely. You can have multiple header , nav , and footer tags sans penalty.
Linking Between Pages Thankfully, we can do this with a simple <a> tag. This is similar to <a> links created in Intro, but with a filepath internal to our project instead of an external online URL. When clicked, this link will display the contents of our contact. html file.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
