I have been working on my web design lately and have been trying to utilize as much CSS as possible without relying on JavaScript. I encountered an issue when designing my navigation menu, which is supposed to remain fixed at the top of the page. Here is an excerpt from my code:
ul {
background: rgba(37,39,44,.80);
list-style-type:none;
margin : 0;
padding: 0;
overflow:visible;
font-family:Kreon;
min-width:1349px;
width:100%;
top:0;
position:fixed;
border-bottom: 5px solid #22A85B;
}
li {
float : right;
}
li a{
display:block;
color : white;
text-align:center;
padding: 15px 20px 15px 20px;
text-decoration :none;
border-right:0.5px solid #22a85b;
transition: 0.3s all;
}
li a:hover {
background:#22a85b;
}
.dropdown-arrow {
position:relative;
top:1px;
display:inline-block;
width:0;
height:0;
margin-left:5px;
border: 4px solid transparent;
border-top-color:#fff;
}
.dropdown {
float:right;
position:relative;
display:inline-block;
color: white;
text-align:center;
padding: 15px 20px 15px 20px;
cursor:pointer;
border-right:1px solid #22A85B;
}
.dropdown:hover{
background:#22a85b;
}
.dropdown:focus {
pointer-events:none;
background:#eee;
color:#000;
}
.dropdown-content {
position:absolute;
background-color:#eee;
min-width:150px;
z-index:1;
opacity:0;
visibility:hidden;
transition: 0.2s linear;
margin-top:36px;
margin-left:-50px;
border : 1px solid #bbb;
border-top:none;
}
.dropdown-content a{
text-align:right;
color: black;
font-family:kreon;
text-decoration:none;
padding: 10px 15px 10px 15px;
display:block;
transition: 0.1s linear;
border-bottom: 1px solid #20D23F;
}
.dropdown-content a:hover{
background: #22a85b;
color:#fff;
}
.dropdown:focus .dropdown-content{
opacity:1;
visibility:visible;
pointer-events:auto;
}
.dropdown:focus .dropdown-arrow{
border: 4px solid transparent;
border-bottom-color:#000;
margin-bottom : 4px;
}<ul>
<li style ="float:left; margin-left:150px; border-left:1px solid #22A85B;"><a href="#">Logo Here</a></li>
<li style="margin-right:60px;"><a href="#">About Us</a></li>
<li><a href="#">Hire Us!</a></li>
<div tabindex="0" class="dropdown">
<li class="fol">Follow Us <span class="dropdown-arrow"></span></li>
<div class="dropdown-content">
<a href="http://twitter.com">Twitter</a>
<a href="http://fb.com">Facebook</a>
<a href="http://pinterest.com" style="border-bottom:none; border-bottom-radius:0.3cm;">Pinterest</a>
</div>
</div>
<li><a href="#">Be Our Designer!</a></li>
<li><a href="#">Portfolio</a></li>
<li style="border-left:1px solid #22A85B;"><a href="#">How Do We Work</a></li>
</ul>For the menu to remain fixed at the top, I used position: fixed; in my CSS. However, upon resizing the browser, some of the menu items started to move out of place or even disappeared. I tried setting a min-width, but that didn't fully resolve the issue. Some menus were still missing when resizing the browser horizontally.
Any suggestions or solutions would be greatly appreciated. Thank you!