How to Make My Navi-Bar The Same Across My HTML

How can I make my navi-bar the same across my html?

I figured it out myself, you can use a JavaScript file and use document.write then put this where you want it to go:

<script type="text/javascript" src="/js/sidebar.js"/>

Here's my js file:

document.write("<div id='sidebartop'>");
document.write("<p>Navigation</p>");
document.write("</div>");

If you want to use both double quotes and single quotes inside the line, be careful with that, and I think that the < and > signs have to be in double quotes. Here's my full code:

     ----/js/sidebar.js----
document.write("<div id='sidebartop'>");
document.write("<p>Navigation</p>");
document.write("</div>");
document.write("<div id='sidebar'>");
if (page==1) { var p=" style='text-decoration: underline;'" } else { var p=" style='text-decoration: normal;'" }
if (page==2) { var pp=" style='text-decoration: underline;'" } else { var pp=" style='text-decoration: normal;'" }
if (page==3) { var ppp=" style='text-decoration: underline;'" } else { var ppp=" style='text-decoration: normal;'" }
if (page==4) { var pppp=" style='text-decoration: underline;'" } else { var pppp=" style='text-decoration: normal;'" }
if (page==5) { var ppppp=" style='text-decoration: underline;'" } else { var ppppp=" style='text-decoration: normal;'" }
document.write("<p><"+'a href="http://brandonc.handcraft.com/"'+p+">Home</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/about"'+pp+">About The Author</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/sevenmages"'+ppp+">The Seven Mages</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/comment"'+pppp+">Leave A Comment</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/calender"'+ppppp+">Calender</a></p>");
document.write("</div>");

     ----In place where you want code to go----
<script>var page=5</script>
<script type="text/javascript" src="/js/sidebar.js"/>

Probably not the most efficient, and I'd defiantly recommend using PHP like in the other answers, but this works for me and doesn't need a .php after every url.

Single navigation bar across website?

JQuery

As JQuery is JS-based, you might be allowed to use it. You could then add a navigation div into each page's template:

<div id="navigation"></div>

and include a script on each page that executes the following JQuery-code:

$(function() {
    $("#navigation").load("navigation.html");
});

Pure JavaScript

Alternatively, if you cannot use JQuery whatsoever, you could use plain JavaScript, which is more lightweight but not as clean.

Wherever you want to include the navigation, simply include a script:

<script src="nav.js"></script>

Which holds your navigation based on document.write:

document.write('<div>\
    ... your navigation content ...\
    </div>\
');

How do you add a navigation bar on the same line as a header?

Use flexbox

add this style to your style

.container {
  display:flex;
  justify-content:space-between;
  align-items:center;  
}

body{  background-color:#fff;  color:#00f;  font-family:"Raleway", Helvetica, sans-serif;  margin:0;}.container {  display:flex;  justify-content:space-between;  align-items:center; }#logo{  border:3px solid;  padding:0 10px;}#navbar li{  display:inline-block;}#navbar a{  text-decoration:none;  font-size:18px;  padding-right:15px;}

<div id="main-header">  <div class="container">    <h1 id="logo">HM</h1>    <nav id="navbar">      <ul>        <li><a href="#">Home</a></li>        <li><a href="#">Projects</a></li>        <li><a href="#" target="_blank">Github</a></li>        <li><a href="#" target="_blank">Twitter</a></li>      </ul>    </nav>  </div></div>

How to reuse a navigation bar across different .html pages with CSS and JS?

Honestly, there's not an easy way to do this with vanilla Javascript. You basically have to either create the navbar using JS, which can then be imported to each page, or you have to copy and paste it.

The industry solution to this problem is to use React, Vue or Angular, all technologies which allow you to create and reuse JSX 'components'. In other words, in React, you could create a navbar component, which could easily be imported in any 'page' of the website. But with vanilla HTML/Javascript, it's really not an option.

How to make Bootstrap nav bar the same width with div

Container are required when using the default grid system. The two most common containers are:

1. .container, which sets a max-width for the page content
2. .container-fluid, which will take the full width of the screen
3. .container-{breakpoint}, which behaves like .container-fluid until it reaches the breakpoint then behaves like a .container.

You will find more details in the very clear documentation.
If we consider the second solution, putting your content in a div.container-fluid fixes the problem:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand logo" href="#">my logo</a>
</nav>
<div class="container-fluid">  
  <div class="row">
    <div class="col-10" style="padding: 0px; background-color: lightgreen; height: 100vh">
    </div>
    <div class="col-2" style="padding: 0; background-color: lightblue; height: 100vh">
    </div>
  </div>
</div>

How do I split up a navigation bar into two sections in the same line?

Make use of justify-content: space-between;.

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

ul {
  list-style-type: none;
}

.nav-links, .logo {
  text-decoration: none;
  color: #000;
}

.navbar {padding: 20px;}
.navbar, ul {display: flex; flex-direction:row;}
ul li {padding: 0 5px;}
.wrapper {display:flex; justify-content: space-between; width:100%; }

  <nav class="navbar">
    <a href="#" class="logo">logo</a>
    <div class="wrapper">
    <ul class="main-nav" id="js-menu">
      <li>
        <a href="#" class="nav-links">Home</a>
      </li>
      <li>
        <a href="#" class="nav-links">Products</a>
      </li>
      <li>
        <a href="#" class="nav-links">About Us</a>
      </li>
    </ul>
    <ul class="ul2">
      <li>
        <a href="#" class="nav-links">Contact Us</a>
      </li>
      <li>
        <a href="#" class="nav-links">Blog</a>
      </li>
    </ul>
    </div>
  </nav>

How can I reuse and html navbar on each page of my website?

On your site you are loading jquery in the head and then loading jquery slim in the foot of your page. In jquery slim load() is not supported. Instead of loading 2 versions of jquery lust load the full version of jquery in your foot section and place your jquery code after that. Here is how your page should look:

<!DOCTYPE html>
<html lang="en">
<head>

</head>

<body>

<!--Navigation bar-->
<div id="nav-placeholder">

</div>

<!--end of Navigation bar-->

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
$(function(){
  $("#nav-placeholder").load("navbar.html");
});
</script>
</body>

---

Related Topics