I would like for a nav bar with some specifications to be kept on every page. I have tried a few solutions on this thread How can I reuse a navigation bar on multiple pages? but surprisingly none of them worked for me - it makes the nav bar dissapear completely.
I suspect this is due to the fact that I have a dropdown on my nav bar, and also the specification that it should stay fixed on teh top of each screen when I scroll down.
Here is the navbar code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/0a48c3a8e0.js" crossorigin="anonymous"></script>
</head>
<div class="navbar">
<a class="active" href="home.html"> Home </a>
<a href="about.html">About</a>
<a href="start">Start</a>
<a href="blog">Blog</a>
<div class="dropdown">
<button class="dropbutton"> Interests</button>
<div class="dropdown-content">
<a href="finance">Finance</a>
<a href="music">Music</a>
<a href="language">Language</a>
<a href="math">Math</a>
</div>
</div>
<div class="search-container">
<input type="text" placeholder="Search...">
<button type="submit"><i class="fa-sharp fa-solid fa-magnifying-glass"></i></button>
</div>
</div>
</html>
.navbar {
background-color: black;
/*overflow: hidden; WE DONT WANT THIS! prevent drop down*/
width: 100%;
position: fixed;
top: 0px
}
.navbar a{
float: left;
color: aliceblue;
text-align: center;
padding: 10px 10px;
font-size: 25px;
text-decoration: none;
}
.navbar a:hover {
background-color: lightseagreen;
color: black;
}
.navbar a:active {
background-color: lightseagreen;
color: aliceblue;
}
.dropdown{
float: left;
overflow: hidden;
}
.dropdown .dropbutton {
font-size: 25px;
border: none;
outline: none;
color: aliceblue;
padding: 10px 10px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
.navbar a:hover, .dropdown:hover .dropbutton {
background-color: lightseagreen;
}
/* hide dropdown default*/
.dropdown-content {
display: none;
position: absolute;
background-color: black;
min-width: 160px;
}
.dropdown-content a {
float: none;
color: aliceblue;
text-align: center;
padding: 10px 10px;
font-size: 25px;
text-decoration: none;
display: block;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content{
display: block;
}
.navbar a.active{
background-color: lightseagreen;
}
.navbar input[type=text]{
float: none;
padding: 5px 10px;
border: none;
margin-top: 10px;
}
.navbar .search-container {
float: right;
}
.navbar .search-container button {
float: right;
padding: 5px 10px;
margin-top: 10px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
I tried most of the JAVASCRIPT solutions on the thread. Because I am a newbie new to this, i want to keep it as close to JS, HTML and CSS first ie with the basics. I also did try some of the JQuery solutions but it did not work unfortunately either.
These are extracts from the things I tried (they all didnt work anyway)
I have a MAIN HOME PAGE called home.html, and my nav bar is in a SEPERATE FILE nameed navbar.html
<!--<script src="nav.js"></script>-->
<div id="nav-placeholder"></div>
<script>
$.get("navbar.html", function(data){
$("#nav-placeholder").replaceWith(data);
});
</script>
Here is the home.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/0a48c3a8e0.js" crossorigin="anonymous"></script>
</head>
<!-- <script id="replaceWithNavbar" src="navbar.js"></script>-->
<!--<script src="nav.js"></script>-->
<div id="nav-placeholder"></div>
<script>
$.get("navbar.html", function(data){
$("#nav-placeholder").replaceWith(data);
});
</script>
<div class="header">
<h1>Welcome to my website</h1>
<p>heloelkfjashdlkjf
</p>
</div>
<div class="row">
<div class="left">test testafdkjhaskfjhalkjfhlakjhflkajh
asldfkjhalskjfh
adslfkjhaslkdjfh
al;ksjfdhalkjh
</div>
<div class="main">
<div class="cards-row">
<div class="column">
<div class="card"> <a href="asdf"> asdf</a></div>
</div>
<div class="column">
<div class="card"> <a href="1"> 1 </a> </div>
</div>
<div class="column">
<div class="card"> <a href="2"> 2 </a> </div>
</div>
<div class="column">
<div class="card"><a href="3"> 3</a> </div>
</div>
</div>
<h1>
Hello World
</h1>
</div>
</div>
</html>```
