This is how to display navigation bar on multiple pages

How to display navigation bar on multiple pages

Provided that you have been surfing the web for a solution on how to display navigation bar on multiple pages without getting the answer then worry no more you have come to the right place. Now if you were to ask everyone on internet he or she would have told you i googled it.Its like looking after a black cat in a coal mine of which you would recognize it through its brown eyes. Without wasting anytime lets get started.The first thing to do is to create a file called Navbar.html and insert our html codes bellow without head or body tags but if you wish to add it it still works just fine now lets save if you have done already.

<div class="topnav" id="myTopnav"> <a href="index.html" class="active">Home</a> <a href="page1.html">News</a> <a href="contact.html">Contact</a> <a href="about.html">About</a> >a href="page1.html">First page</a> <a href="page2.html">Second page>/a< <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a></div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script>

Finally we are supposed to create another file in our project folder and we name it Navbar.js that will be used to store our JavaScript files for navbar.Then you are free to add the following JavaScript code and click save.

<script> fetch('navbar.html') .then(res => res.text()) .then(text => { let oldelem = document.querySelector("script#replace_with_navbar"); let newelem = document.createElement("div"); newelem.innerHTML = text; oldelem.parentNode.replaceChild(newelem,oldelem); }) </script>

Place the above code in body of every page where you want navbar to appear:

The same procedure applies to footer but we will have a slight difference as follows

<script> fetch('footer.html') .then(res => res.text()) .then(text => { let oldelem = document.querySelector("script#replace_with_footer"); let newelem = document.createElement("div"); newelem.innerHTML = text; oldelem.parentNode.replaceChild(newelem,oldelem); }) </script>

<script id="replace_with_navbar" src="navbar.js"></script>

You May Like The Video Bellow;

<script id="replace_with_footer" src="footer.js"></script>

if you are coding using mobile phone use (Acode) app is the best You Didn't Know Now You Are In The Know

They Say "Giving Is A Good Medicine And You Don't Have To Donate But It Will Be Extraordinary If You Do"

BUY ME COFFEE