I am having an issue with my navigation bar. I have five links on my navbar: Home, Size, Type, Resources, Help, all have dropdown content and subdropdown content except for "Home". Adding "Home" to the navigation bar seems to be pushing down "Help" to the next line. Does anyone have any input on how I can fix this? I have included my html and css.
.navbar {
overflow: hidden;
background-color: #0062ab;
}
.navbar a {
float: left;
font-size: 14px;
overflow: hidden;
color: white;
background-color: #0062ab;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown-content li {
list-style: none;
}
.navbar a:hover,
.dropdown:hover .dropbtn,
.navbar li:hover>a {
color: white;
background-color: rgb(6, 66, 135);
}
.dropdown {
width: 10%;
float: left;
text-align: center;
overflow: hidden;
}
.dropdown .dropbtn {
border: none;
outline: none;
font-size: 14px;
padding: 14px 16px;
color: white;
background-color: #0062ab;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
color: white;
background-color: rgb(0, 128, 198);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.navbar li a {
float: none;
color: none;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content li:hover {
background-color: rgb(6, 66, 135);
}
.dropdown:hover .dropdown-subcontent {
display: none;
}
.dropdown-content li:hover>.dropdown-subcontent {
position: absolute;
left: 100%;
overflow: auto;
display: block;
min-width: 160 px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
margin-top: -25%;
}<div class="navbar">
<a href="sites/Home.aspx">Home</a>
<div class="dropdown">
<button class="dropbtn" onclick="location.href='http://mywebsite.com/sites/size.aspx'" type="button">Size</button>
<div class="dropdown-content" style=left:13.5%;>
<a href="/sites/MasterSpace.aspx">Master Suite</a>
<li><a href="/sites/MasterSpace.aspx">Guest Suite</a>
<div class="dropdown-subcontent">
<a href="/sites/Space1.aspx">Space1</a>
<a href="/sites/Space2.aspx">Space2</a>
</div>
</li>
</div>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="location.href='http://mywebsite.com/sites/type.aspx'" type="button">Type</button>
<div class="dropdown-content" style=left:13.5%;>
<a href="/sites/MultiFamily.aspx">Multi Family</a>
<li><a href="/sites/SingleFamily.aspx">Single Family</a>
<div class="dropdown-subcontent">
<a href="/sites/Type1.aspx">Space1</a>
<a href="/sites/Type2.aspx">Space2</a>
</div>
</li>
</div>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="location.href='http://mywebsite.com/sites/resources.aspx'" type="button">Resources</button>
<div class="dropdown-content" style=left:13.5%;>
<a href="/sites/Form1.aspx>Form 1</a>
<a href=" /sites/Form2.aspx ">Form 2</a>
</div>
</div>
<div class="dropdown ">
<button class="dropbtn " onclick="location.href='http://mywebsite.com/sites/help.aspx' " type="button ">Resources</button>
<div class="dropdown-content " style=left:13.5%;>
<a href="/sites/Faq.aspx>FAQ</a>
<a href="/sites/contact.aspx">Contact Us</a>
</div>
</div>
</div>
CodePudding user response：
Just use max-width in .dropdow it means, the default width size will be 100px but if the text will go from it, the div shrink too
also make sure to avoid from percentage sizes on width there is high risk that layout will be break, use width and percentage together if you have container, and width value of this container always must be 100% to take all the field on the page
.navbar {
overflow: hidden;
background-color: #0062ab;
}
.navbar a {
float: left;
font-size: 14px;
overflow: hidden;
color: white;
background-color: #0062ab;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown-content li {
list-style: none;
}
.navbar a:hover,
.dropdown:hover .dropbtn,
.navbar li:hover>a {
color: white;
background-color: rgb(6, 66, 135);
}
.dropdown {
max-width: 100px;
float: left;
text-align: center;
overflow: hidden;
}
.dropdown .dropbtn {
border: none;
outline: none;
font-size: 14px;
padding: 14px 16px;
color: white;
background-color: #0062ab;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
color: white;
background-color: rgb(0, 128, 198);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.navbar li a {
float: none;
color: none;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content li:hover {
background-color: rgb(6, 66, 135);
}
.dropdown:hover .dropdown-subcontent {
display: none;
}
.dropdown-content li:hover>.dropdown-subcontent {
position: absolute;
left: 100%;
overflow: auto;
display: block;
min-width: 160 px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
margin-top: -25%;
}<div class="navbar">
<a href="sites/Home.aspx">Home</a>
<div class="dropdown">
<button class="dropbtn" onclick="location.href='http://mywebsite.com/sites/size.aspx'" type="button">Size</button>
<div class="dropdown-content" style=left:13.5%;>
<a href="/sites/MasterSpace.aspx">Master Suite</a>
<li><a href="/sites/MasterSpace.aspx">Guest Suite</a>
<div class="dropdown-subcontent">
<a href="/sites/Space1.aspx">Space1</a>
<a href="/sites/Space2.aspx">Space2</a>
</div>
</li>
</div>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="location.href='http://mywebsite.com/sites/type.aspx'" type="button">Type</button>
<div class="dropdown-content" style=left:13.5%;>
<a href="/sites/MultiFamily.aspx">Multi Family</a>
<li><a href="/sites/SingleFamily.aspx">Single Family</a>
<div class="dropdown-subcontent">
<a href="/sites/Type1.aspx">Space1</a>
<a href="/sites/Type2.aspx">Space2</a>
</div>
</li>
</div>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="location.href='http://mywebsite.com/sites/resources.aspx'" type="button">Resources</button>
<div class="dropdown-content" style=left:13.5%;>
<a href="/sites/Form1.aspx>Form 1</a>
<a href=" /sites/Form2.aspx ">Form 2</a>
</div>
</div>
<div class="dropdown ">
<button class="dropbtn " onclick="location.href='http://mywebsite.com/sites/help.aspx' " type="button ">Resources</button>
<div class="dropdown-content " style=left:13.5%;>
<a href="/sites/Faq.aspx>FAQ</a>
<a href="/sites/contact.aspx">Contact Us</a>
</div>
</div>
</div>CodePudding user response：
in your CSS, add this:
body {
margin: 0px;
}