Menu
I'm creating a fixed navigation bar with a dropdown menu. Unfortunately the dropdown menu isn't visible when the bar is fixed. I want the page to scroll when neccesary but the navigation bar must always be visible. I've seen several posts on this, but none of the given solutions worked for me.
The code below works fine but when removing the comment marks around /*position: fixed;*/ the trouble occurs.
Regards
p {
font-family: Arial, Times, serif;
}
ul {
list-style-type: none;
font-family: Arial, Times, serif;
margin: 10;
padding: 0;
overflow: hidden;
background-color: #555555;
text-decoration: none;
/* remove comment below to see effect*/
/*position: fixed;*/
top: 0;
width: 100%;
/* Full width */
}
li {
float: left;
}
/* Add a gray right border to all list items, except the last item (last- child) */
li {
border-right: 1px solid #bbbbbb;
}
li:last-child {
border-right: none;
}
/* Add an ''active'' to current link to know user which page he is on */
li a.active {
background-color: #4CAF50;
color: #ffffff;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 8px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #4CAF50;
color: #ffffff;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: #000000;
padding: 8px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #4CAF50
}
.dropdown:hover .dropdown-content {
display: block;
}<ul>
<li class="dropdown">
<a class="active" href="javascript:void(0)">Startpages</a>
<div class="dropdown-content">
<a class="active" href="#">Home</a>
<a href="#">Afdeling A</a>
<a href="#">Afdeling B</a>
<a href="#">Afdeling C</a>
<a href="#">Afdeling D</a>
<a href="#">Afdeling E</a>
<a href="#">Afdeling F</a>
<a href="#">Afdeling G</a>
<a href="#">Afdeling H</a>
<a href="#">Afdeling I</a>
</div>
</li>
</ul>
<font size="3"></font>
<p> </p>
<table bordercolor="" border="0" cellspacing="10" cellpadding="2">
<tbody>
<tr>
<td><font color="#555555" face="Arial" size="4"><b>Home</b></font>
</td>
</tr>
<tr>
<td><font face="Arial" size="2"><i>Quick ...</i></font>
</td>
</tr>
<tr>
<td><font face="Arial" size="2">Absence</font>
</td </tr>
<tr>
<td><font face="Arial" size="2">Phonelist</font>
</td>
</tr>
<tr>
<td><font face="Arial"> </font>
</td>
</tr>
<tr>
<td><font face="Arial"> </font>
</td>
</tr>
</tbody>
</table>
881
Solution : The dropdown should be toggled via data attributes or using javascript. In the above program, we have forgotten to add a data attribute so the dropdown is not working. So add data-bs-toggle="dropdown" to toggle the dropdown.
To create a sticky navbar, you use the position: fixed; CSS property to "stick" your navbar to the viewport, and position: sticky; to make it stick to its parent element.
Use position absolute and set the top value to the number of pixels you want the Nav bar to be from the top of the browser.
It is because you have the overflow hidden overflow: hidden; remove it from the selector which is fixed.
ul {
list-style-type: none;
font-family: Arial, Times, serif;
margin: 10;
padding: 0;
background-color: #555555;
text-decoration: none;
/* remove comment below to see effect*/
position: fixed;
top: 0;
width: 100%; /* Full width */
}
fiddle https://jsfiddle.net/fdkjuf02/1/
153
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
