CODEWITHSUNDEEP
htmlcssdrop-down-menu
Colin Slater
Colin Slater

Reputation: 127

w3css - Dropdown Menu fixed at top (w3-top)

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>&nbsp;</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

Upvotes: 3

Views: 2403

Answers (2)

Angie R
Angie R

Reputation: 98

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

Upvotes: 5

Mostafa Sabeghi
Mostafa Sabeghi

Reputation: 382

You set overflow: hidden for w3-bar class , remove overflow: hidden ,

or add this line to style tag

.w3-bar 
{
    overflow: visible;
}

Upvotes: 2

Related Questions