Shadowsista Shadowsista - 17 days ago 5
CSS Question

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>




Answer

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>

Comments