CODEWITHSUNDEEP
htmlcss
Aaria
Aaria

Reputation: 289

Navbar dropdown not displaying properly

I want the dropdown on my navbar to be wide enough the the text in it displays properly, but it's constrained to the size of the button you hover over to activate it. I want the dropdown to be a bigger width than the button.

The title displays fine in browser so not too sure why it is misaligned in the fiddle.

#center-title {
  width: 200px;
  font-size: 30px;
  color: white;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
#cog {
  width: 20px;
  height: 20px;
  margin-right: 50px;
  margin-top: 15px;
}
#dropdown {
  float: right;
  position: relative;
  display: inline-block;
}
#dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0#2);
}
#dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
#dropdown-content a:hover {
  background-color: #f1f1f1
}
#dropdown:hover #dropdown-content {
  display: block;
}
nav {
  background-color: #2b569a;
  width: 100%;
  height: 50px;
  margin-top: 0;
}
<nav>
  <div class="center">
    <h1 id="center-title"> Blocs </h1>
  </div>
  <div id="dropdown">
    <img id="cog" src="/static/images/cog2.png" alt="" />
    <div id="dropdown-content">
      <a href="profile.html"> Profile </a>
      <a href="settings.html"> Settings </a>
      <a href="logs.html"> Logs </a>
      <a href="emails.html"> Email list </a>
    </div>
  </div>
</nav>

Upvotes: 0

Views: 49

Answers (2)

Geeky
Geeky

Reputation: 7488

You can use display:flex,instead of using float's and display:inline-block for layouts.

check this snippet

. #center-title {
  width: 200px;
  font-size: 30px;
  color: white;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
#cog {
  width: 20px;
  height: 20px;
  margin-right: 50px;
  margin-top: 15px;
}
.center {
  margin: auto;
}
#dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  right: 20px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0#2);
}
#dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
#dropdown-content a:hover {
  background-color: #f1f1f1
}
#dropdown:hover #dropdown-content {
  display: block;
}
nav {
  background-color: #2b569a;
  width: 100%;
  height: 50px;
  margin-top: 0;
  display: flex;
  justify-content: flex-end;
  align-content: center;
}
<nav>
  <div class="center">
    <h1 id="center-title"> Blocs </h1>
  </div>
  <div id="dropdown">
    <img id="cog" src="/static/images/cog2.png" alt="" />
    <div id="dropdown-content">
      <a href="profile.html"> Profile </a>
      <a href="settings.html"> Settings </a>
      <a href="logs.html"> Logs </a>
      <a href="emails.html"> Email list </a>
    </div>
  </div>
</nav>
</div>

Hope it helps

Upvotes: 0

hungerstar
hungerstar

Reputation: 21675

Add right: 0; to #dropdown-content.

#center-title {
  width: 200px;
  font-size: 30px;
  color: white;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
#cog {
  width: 20px;
  height: 20px;
  margin-right: 50px;
  margin-top: 15px;
}
#dropdown {
  float: right;
  position: relative;
  display: inline-block;
}
#dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0#2);
}
#dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
#dropdown-content a:hover {
  background-color: #f1f1f1
}
#dropdown:hover #dropdown-content {
  display: block;
}
nav {
  background-color: #2b569a;
  width: 100%;
  height: 50px;
  margin-top: 0;
}
<nav>
  <div class="center">
    <h1 id="center-title"> Blocs </h1>
  </div>
  <div id="dropdown">
    <img id="cog" src="/static/images/cog2.png" alt="" />
    <div id="dropdown-content">
      <a href="profile.html"> Profile </a>
      <a href="settings.html"> Settings </a>
      <a href="logs.html"> Logs </a>
      <a href="emails.html"> Email list </a>
    </div>
  </div>
</nav>

Upvotes: 1

Related Questions