Menu
I'm creating a menu bar using w3css. I've used this on a couple of sites and quite like what it does and how easy it is to implement... but I've come up across a bit of a problem. My menu bar has hoverable dropdown menus, but I also want it to be fixed at the top of the screen so that the content just scrolls underneath it.
Here's my code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin-top: 50px;
}
</style>
</head>
<body>
<div class="w3-bar w3-black w3-top">
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-bars"></i></a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
<span class="w3-bar-item">Search: </span>
<form action="search.asp" method="post" name="searchForm" id="searchForm">
<input type="text" class="w3-bar-item w3-input w3-white" placeholder="Booking Ref..." name="SearchText">
<a href="#" onclick="document.getElementById('searchForm').submit();" class="w3-bar-item w3-button w3-green"><i class="fa fa-search"></i></a>
</form>
<a href="#" class="w3-bar-item w3-button w3-right">Logout</a>
</div>
<h1>Page Title</h1>
<p> </p>
</body>
</html>
If I take the w3-top class away from the div, then the dropdowns work fine, but the menu bar scrolls off the top of the screen when the page scrolls. If I include the w3-top class, then the dropdown menus don't display... they sort of appear behind something, but I can't see what.
I've tried changing the Z-Index of the various elements and things, and setting the page height and so on, but this doesn't seem to make any difference. I'm hoping that someone can point out where I've obviously gone wrong...
Thanks very much...
Colin
560
asked Nov 28 '25 06:11
w3-top should be placed outside of w3-bar, as a wrapper/container for the bar:
See updated code here: https://www.w3schools.com/code/tryit.asp?filename=FEZ9Z1BYNTEX
109
answered Nov 30 '25 23:11
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