CODEWITHSUNDEEP
htmlcss
user1741764
user1741764

Reputation: 13

Navigation bar odd behavior after giving it a fixed position in the css file

I made a navigation bar with a dropdown and was working fine until i added the "position: fixed;" statement in the css file. Once I did that the dropdown either isn't coming up when the mouse hovers over the designated button or is coming up off screen. Note the parent button reacts to the mouse hover fine in terms of color changes, that's why i think the dropdown is coming up off screen.

EDIT: i realized that the dropdown appears in the ul element and i can scroll within it to view the list. It's not appearing as an actual dropdown over the content on the page but within the navbar itself.

Here's my code:

ul.navbar {
  overflow-x: hidden;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #ffb90f;
  width: 100%;
  display: block;
  vertical-align: middle;
  height: 48px;
  position: fixed;
  top: 0;
}

.navbar li {
  display: inline-block;
  overflow: hidden;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
dropdown:hover .dropbtn {
  background-color: #FFC63D;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #FFF3D5;
  min-width: 160px;
  box-shadow: 0px 8px 100px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  margin-left: 8.7%;
}

.dropdown-content a {
  color: #FFBE1E;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ffb90f;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<body>

  <ul class="navbar">
    <li id="navbar" style=" margin-left: 3%; width:22%"><a href="homepage.php" class="dropbtn">Home</a></li>
    <li id="navbar" style=" width: 50%; text-align: center"><img src="logo.png" width="45px" height="45px" style="margin: 0"></li>
    <li id="navbar" class="dropdown" style="float: right; margin-right: 3%; width: 21%; text-align: right">
      <a href="javascript:void(0)" class="dropbtn">Jump to...</a>
      <div class="dropdown-content">
        <a href="#">Item1</a>
        <a href="#">Item2</a>
      </div>
    </li>


  </ul>

</body>

Upvotes: 0

Views: 59

Answers (2)

LKG
LKG

Reputation: 4192

Update css and remove the overflow to properties ul.navbarfrom your css and add position:relative and remove width:21%; to below html

<li id="navbar" class="dropdown" style="float: right; margin-right: 3%; text-align: right; position:relative;">

css part 

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #FFF3D5;
  min-width: 160px;
  box-shadow: 0px 8px 100px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  margin-left: 8.7%;
  left:0px; /* Add this you can change it as your need */
}

working fiddle

fiddle

ul.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #ffb90f;
  width: 100%;
  display: block;
  vertical-align: middle;
  height: auto;
  position: fixed;
  top: 0;
}

.navbar li {
  display: inline-block;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
dropdown:hover .dropbtn {
  background-color: #FFC63D;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #FFF3D5;
  min-width: 160px;
  box-shadow: 0px 8px 100px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  margin-left: 8.7%;
  left:0px;
}

.dropdown-content a {
  color: #FFBE1E;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ffb90f;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<ul class="navbar">
  <li id="navbar" style=" margin-left: 3%; width:22%"><a href="homepage.php" class="dropbtn">Home</a></li>
  <li id="navbar" style=" width: 50%; text-align: center"><img src="logo.png" width="45px" height="45px" style="margin: 0"></li>
  <li id="navbar" class="dropdown" style="float: right; margin-right: 3%; text-align: right; position:relative;">
    <a href="javascript:void(0)" class="dropbtn">Jump to...</a>
    <div class="dropdown-content">
      <a href="#">Item1</a>
      <a href="#">Item2</a>
    </div>
  </li>
</ul>

Upvotes: 1

Satish
Satish

Reputation: 25

Remove overflow from .navbar

ul.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #ffb90f;
  width: 100%;
  display: block;
  vertical-align: middle;
  height: 48px;
  position: fixed;
  top: 0;
}

.navbar li {
  display: inline-block;
  overflow: hidden;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
dropdown:hover .dropbtn {
  background-color: #FFC63D;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #FFF3D5;
  min-width: 160px;
  box-shadow: 0px 8px 100px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  margin-left: 8.7%;
}

.dropdown-content a {
  color: #FFBE1E;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ffb90f;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<body>

  <ul class="navbar">
    <li id="navbar" style=" margin-left: 3%; width:22%"><a href="homepage.php" class="dropbtn">Home</a></li>
    <li id="navbar" style=" width: 50%; text-align: center"><img src="logo.png" width="45px" height="45px" style="margin: 0"></li>
    <li id="navbar" class="dropdown" style="float: right; margin-right: 3%; width: 21%; text-align: right">
      <a href="javascript:void(0)" class="dropbtn">Jump to...</a>
      <div class="dropdown-content">
        <a href="#">Item1</a>
        <a href="#">Item2</a>
      </div>
    </li>


  </ul>

</body>

Upvotes: 0

Related Questions