Why is my dropdown navbar disappearing after I try to fix it? - html

Question

My navbar is disappearing every time I try the position:fixed. I've gone through similar questions and I still can't figure it out. For that matter, the only position that is working is the position:static, all the other ones will mess up the dropdown bar or just won't show up. I'm basically just trying to make a sticky header.
.navbar {
overflow: hidden;
background-color: white;
padding: 20px 10px;
width:100%;
height: 74px;
}
/* Style the header links */
.navbar a {
float: left;
color: #9c9c9c;
text-align: center;
padding: 12px 20px;
text-decoration: none;
font-size: 20px;
line-height: 25px;
}
/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.navbar a.logo {
font-size: 25px;
font-weight: bold;
}
.dropdown:hover .dropbtn {
border-bottom: 5px solid #002873;
}
/* Float the link section to the right */
.navbar-right {
float: right;
}
.navbar-icon {
float: right;
padding: 1px;
}
/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
#media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
text-align: left;
}
.navbar-right {
float: none;
}
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
background-color: inherit;
font-family: inherit;
margin: 0px;
padding: 0px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
z-index: 1;
margin: 0px;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
color: black;
border-bottom: 0px;
}
.dropdown:hover .dropdown-content {
display: block;
}
<header>
<div class="navbar">
<a href="home.html" class="title" style="font-weight:bolder; font-size:40px; color:#002873" > ExhibitLab </a>
<div class="navbar-right">
<div class="dropdown">
<button class="dropbtn"> About </button>
<div class="dropdown-content">
History
Timeline
</div>
</div>
<div class="dropdown">
<button class="dropbtn"> Publication </button>
<div class="dropdown-content">
Report
Additional Sources
</div>
</div>
<div class="dropdown">
<button class="dropbtn"> Research </button>
<div class="dropdown-content">
Thesis
Context
Global Implications
Mathematical Proof
</div>
</div>
<div class="dropdown">
<button class="dropbtn"> Model </button>
<div class="dropdown-content">
2D Model
SketchUp Model
Economic Model
Environmental Model
</div>
</div>
<div class="dropdown">
<button class="dropbtn"> Exhibit </button>
<div class="dropdown-content">
Preview
Location
</div>
</div>
<div class="dropdown">
<button class="dropbtn"> Media</button>
<div class="dropdown-content">
</div>
</div>
<div class="dropdown">
<button class="dropbtn"> Team</button>
<div class="dropdown-content">
Leading Professor
PhD Students
Grad Researchers
Undergrad Researchers
Additional Support
</div>
</div>
<div class = "navbar-icon">
mail_outline
<a href="#search" class="material-icons" style="font-size:20px" >search</a>
</div>
</div>
</div>
</header>

Answer 1

Bootstrap provides a class for fixing your navbar at the top of your screen 'navbar-fixed-top'.
<nav class="navbar navbar-default navbar-fixed-top"><div class="container"></div></nav>
https://getbootstrap.com/docs/3.4/components/#navbar-fixed-top

Answer 2

Try setting the position property in the header element instead the .navbar:
header {
position: fixed;
}