I am designing the home page for a project and the dropdown content is both behind the below navigation menu (primary-nav) and hidden offscreen to the right. I had this working with a margin-right tag but somehow I broke the code between then and now.
Also, the basic structure of my page is designed using flexbox so I’m not sure if that helps. I use flexbox to stick the footer to the bottom and not cover content.
Here is an excerpt of my style.css:
/* || Dropdown Menus || */ .dropdown { overflow: hidden; text-align: center; padding-right: 8px; float: left; } .dropdown .dropbtn { background-color: transparent; border: none; outline: none; color: white; font-family: inherit; /* Important for vertical align on mobile phones */ margin: 0; /* Important for vertical align on mobile phones */ cursor: pointer; } .dropdown-content { display: none; position: absolute; background-color: #3f69a8; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); white-space: nowrap; z-index: 10000; } .dropdown .dropdown-content a, .dropdown .dropdown-content h3 { color: white; padding: 5px; display: block; text-align: left; font-size: 16px; white-space: nowrap; float: none; } .dropdown:hover .dropdown-content { /* Show dropdown menu on hover */ display: block; } .dropdown-content a:hover { background-color: darkgray; } /* Top Navigation */ .navbar { overflow: hidden; background: #3f69a8; width: 100%; height: 70px; display: inline; font-weight: bold; font-size: 25px; margin: 0; padding: 15px; position: fixed; top: 0; left: 0; z-index: 5; } .logobtn { background-color: transparent; border: none; } .navbar a { font-size: 30px; color: white; text-align: center; text-decoration: none; } /* || PRIMARY MENU || */ .primary-nav { align-items: center; height: 50px; left: 0px; padding: 15px; width: 100%; margin: 0px; background-color: darkgray; display: block; position: fixed; top: 70px; z-index: 3; } .primary-nav a { color: white; font-size: 16px; }
And here is my home.php:
<nav class="navbar"> <button class="logobtn"> <a href="home.php" title="Home"><i class="fas fa-shapes"></i> <span style="font-weight:bold; font-size:40px">S</span>hape <span style="font-weight:bold; font-size:40px">S</span>earch</a> </button> <div class="dropdown" style="float:right; width: 10%;"> <button class="dropbtn"> <i class="fas fa-cog fa-2x" title="Settings"></i> </button> <div class="dropdown-content"> <button class="dark-mode-btn" onclick="toggleDark()"><i class="fas fa-adjust"></i> Dark Mode </button> <a href="#"><i class="fa-regular fa-earth-americas"></i>Language</a> </div> </div> <div class="dropdown" style="float:right; width:10%;"> <button class="dropbtn"> <i class="fas fa-user-circle fa-2x" title="Account"></i> </button> <div class="dropdown-content"> <h3>Welcome $username!</h3> <a href="editProfile.php"><i class="fas fa-user-edit"></i> My Profile</a> <a href="manageUploads.php"><i class="fas fa-upload"></i> Manage Uploads</a> <a href="history.php"><i class="far fa-clock"></i> History</a> <a href="logout.php"><i class="fas fa-sign-out-alt"></i> Logout</a> </div> </div> <div class="dropdown" style="float:right; width:10%"> <button class="dropbtn"> <i class="fas fa-bell fa-2x" title="Notifications"></i> </button> <div class="dropdown-content"> <a href="#">Notifications Center</a> <a href="#">Clear Notifications</a> </div> </div> </nav>
Advertisement
Answer
Edit
/* Top Navigation */ .navbar { /* overflow: hidden; Remove this line */ background: #3f69a8; width: 100%; height: 70px; display: inline; font-weight: bold; font-size: 25px; margin: 0; padding: 15px; position: fixed; top: 0; left: 0; z-index: 5; }