0

I'm making a website as a school project, and all I've made so far is the navigation bar and the pages I expect the website to contain. However, I'm unsure how I make the navigation bar appear on all of the pages.

This is the navigation bar code contained within the <body> tag:

.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.navbar .search-container {
  float: right;
}

.navbar input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

.navbar .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.navbar .search-container button:hover {
  background: #ccc;
}
<div class="navbar">
  <a href="index.html"><i class="fa fa-fw fa-home"></i> Hjem</a>
  <a href="nyheder.html"><i class="fa fa-fw fa-newspaper-o"></i> Nyheder</a>
  <div class="dropdown">
    <button class="dropbtn"><i class="fa fa-fw fa-institution"></i> Esportforeninger</button>
    <div class="dropdown-content">
      <a href="#nordjylland">Region Nordjylland</a>
      <a href="#midtjylland">Region Midtjylland</a>
      <a href="#syddanmark">Region Syddanmark</a>
      <a href="#sjaelland">Region Sjælland</a>
      <a href="#hovedstaden">Region Hovedstaden</a>
    </div>
  </div>
  <a href="#kontakt"><i class="fa fa-fw fa-envelope"></i> Kontakt</a>
  <div class="dropdown">
    <button class="dropbtn"><i class="fa fa-fw fa-users"></i> Om os</button>
    <div class="dropdown-content">
      <a href="#generelt">Generelt om hjemmesiden</a>
      <a href="#udviklingsteam">Udviklingsteam</a>
    </div>
  </div>
  <div class="dropdown">
    <button class="dropbtn"><i class="fa fa-fw fa-user"></i>Medlemsskab</button>
    <div class="dropdown-content">
      <a href="#opretbruger">Opret bruger</a>
      <a href="#logind">Log ind</a>
      <a href="#logud">Log ud</a>
    </div>
  </div>
  <div class="search-container">
    <form action="/action_page.php">
      <input type="text" placeholder="Search..." name="search">
      <button type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
    </form>
  </div>
</div>

How do I make this appear on all the pages without copy pasting the code?

leonheess
  • 5,825
  • 6
  • 42
  • 67
Anders
  • 23
  • 4
  • Please check this question: [Include html into another html][1] [1]: https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file – vladwoguer Apr 03 '19 at 11:44
  • untill [html import](https://www.html5rocks.com/en/tutorials/webcomponents/imports/) is fully supported you would ned a server-side include directive like [php's include](https://www.php.net/manual/en/function.include.php) (if using php for example) – Nikos M. Apr 03 '19 at 11:50
  • There are several ways. The links above suggest a JavaScript solution, but you could also make friends with PHP or static page builders (mostly node.js). Both are intermediate level options, but worth trying to explore new topics in web development. – bitstarr Apr 03 '19 at 11:52
  • are you using only HTML? I mean this is really easy to achieve if you are using a framework or PHP. – Code_Ninja Apr 03 '19 at 12:33

0 Answers0