After a lot of struggle, I finally managed to get my dropdown buttons to display at the top of the screen, fit in the navbar, and appear next to each other. However, now the dropdown menus for both are overlayed on each other and both drop under the "About Us" section instead of their respective button.
Here is a screenshot of my site.
#headbar {
width: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
z-index: 2;
border: 2px black solid;
display: inline;
background-color: #ff0000;
}
#logo {
display: inline;
height: 50px;
width: 50px;
border: none;
}
#title {
display: inline;
text-align: center;
font-size: 20px;
min-width: 100%;
border: 2px solid black;
}
.button-container {
display: flex;
left: 190px;
min-width: 100%;
min-height: 50px;
border: 2px solid black;
top: 0;
position: absolute;
}
#button-1 {
background-color: red;
color: white;
padding: 15px 10px 15px 10px;
font-size: 15px;
text-align: center;
font-weight: bold;
display: inline;
border: none;
border: 2px solid black;
height: 50px;
width: 100px;
position: relative;
}
#button-2 {
background-color: red;
color: white;
padding: 15px;
font-size: 15px;
text-align: center;
font-weight: bold;
display: inline;
border: none;
border: 2px solid black;
height: 50px;
width: 100px;
position: relative;
left: 100px;
}
.dropdown {
position: absolute;
display: inline-block;
}
.dropdown-content a {
color: white;
padding: 8px 10px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ff0000;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #ff0000;
}
<nav id="navbar">
<header id="headbar">
<h1 id="title">DAILY</h1><img id="logo" src="https://i.ibb.co/C7wkQsw/DB-Logo.png" alt="Daily Bugle Logo"><h1 id="title">BUGLE</h1>
<div class="button-container">
<div class="dropdown">
<button class="dropbtn" id="button-1">About Us</button>
<div class="dropdown-content">
<a class="nav-link" href="#Section_1">What We Are</a>
<a class="nav-link" href="#Section_2">Journalist Oath</a>
<a class="nav-link" href="#Section_3">Editors</a>
<a class="nav-link" href="#Section_4">Writers</a>
<a class="nav-link" href="#Section_5">Photographers</a>
</div>
</div>
</div>
<div class="button-container">
<div class="dropdown">
<button class="dropbtn" id="button-2">Politics</button>
<div class="dropdown-content">
<a class="nav-link" href="#Section_1">Super-Politics</a>
<a class="nav-link" href="#Section_2">Local</a>
<a class="nav-link" href="#Section_3">United States</a>
<a class="nav-link" href="#Section_4">Global</a>
<a class="nav-link" href="#Section_5">Galactic</a>
</div>
</div>
</div>
</header>
</nav>
I’m not sure what to put for what I’ve tried because I’ve been messing with this for 2 hours and have a poor memory.
2
Answers
I would recommend you to read more about
html
andcss
while practicing. But lets talk about issue’s.As a beginner avoid using
position: absolute
unless you know what you are doing. You can achieve any structure usingdisplay: flex
so try to use that.You have added many unnecessary css which I have removed and added required css to make
logo
andheader
align center which isdisplay: flex
,align-items: center
andmargin: 0
toh1
. Below is working example. If you have any doubt please share in comments.I have tried to fix all mistakes in your
HTML
andCSS
. I have addedJavaScript
myself to make sure the dropdown appears accurately. I also have tried to keep the design same. I hope my efforts will resolve your issue.Here is the updated
code
: