Currently doing a quick website. Got navigation styled and working correctly, however I implemented a drop down as a nav item. This causes three problems I can't quite seem to fix:
On the navigation toggle, content overlaps with each other.
On the nav toggle, the navigation makes you scroll, even through there
is room to expand the dropdown on desktop screens the hover.
On desktop screens the nav item causes the drop to happen within the header with a scroll bar.
Been stuck on this for a while any assistance would be appreciated.
function NavToggle() {
var tn = document.getElementById("nav-bar")
if (tn.style.display === "none") {
tn.style.display = "block";
} else {
tn.style.display = "none";
}
}
* {
box-sizing: border-box;
font-family: sans-serif;
margin: 0;
padding: 0;
}
html,
body {
overflow-y: auto;
}
ul {
margin: 0;
padding: 0;
}
/* Header and Navigation */
header {
width: 100vw;
height: auto;
background-color: #222;
position: fixed;
z-index: 1;
overflow-y: auto;
max-height: 100vh;
overflow-x: hidden;
}
nav {
display: none;
z-index: 2;
}
.title-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
width: 100vw;
padding: 0 10px;
}
/* menu base styles */
nav ul {
list-style-type: none;
}
nav li {
height: 50px;
}
.title-wrapper>a {
font-size: 16px;
}
a {
color: #999;
}
nav a {
text-decoration: none;
display: flex;
align-items: center;
justify-content: flex-start;
height: 100%;
font-size: 14px;
padding-left: 10px;
}
nav a:hover {
color: #fff;
}
/* Menu Toggle Styling */
.menu-toggle {
font-size: 26px;
color: #fff;
cursor: pointer;
padding: 0 15px 0 10px;
display: flex;
align-items: center;
justify-content: center;
}
.menu-toggle-button {
padding: inherit;
}
#media screen and (min-width: 930px) {
nav ul {
display: flex;
}
/* Header Content */
.header-container {
display: flex;
justify-content: center;
align-items: center;
}
.menu-toggle {
display: none;
}
.header-wrapper {
max-width: 1200px;
width: 100%;
display: flex;
justify-content: center;
padding: 0 20px;
}
.header-title {
font-size: 18px;
}
#nav-bar {
width: 70%;
display: inline-flex;
justify-content: space-between;
}
a {
padding: 0 1rem;
}
.nav-dropdown {
position: relative;
}
.nav-dropdown-menu {
display: none;
position: absolute;
z-index: 2;
}
.nav-dropdown:hover>.nav-dropdown-menu {
display: block;
}
}
<body>
<header class="nav-wrapper header-container">
<div class="header-wrapper">
<div class="title-wrapper">
<a>Chemical Finger Print Analysis</a>
<div class="menu-toggle">
<span id="menu-toggle-button" onclick="NavToggle()">☰</span>
</div>
</div>
<nav id="nav-bar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Data</li>
<li>Reports</li>
</ul>
<ul>
<li class="nav-dropdown">Account
<ul class="nav-dropdown-menu">
<li>Account</li>
<li>Order History</li>
<li>Wishlist</li>
</ul>
</li>
<li>Login</li>
</ul>
</nav>
</div>
</header>
</body>
To fix the first two issues, you have to set the display of .nav-dropdown to inline-block:
.nav-dropdown {
display: inline-block;
}
To fix the third issue, you have to set the overflow of the header to visible, since you have set it to auto which generates scroll bars if the content overflows.
.header-container {
overflow: visible;
}
This is a working example (without fixing any other issues):
function NavToggle() {
var tn = document.getElementById("nav-bar")
if (tn.style.display === "none") {
tn.style.display = "block";
} else {
tn.style.display = "none";
}
}
* {
box-sizing: border-box;
font-family: sans-serif;
margin: 0;
padding: 0;
}
html,
body {
overflow-y: auto;
}
ul {
margin: 0;
padding: 0;
}
/* Header and Navigation */
header {
width: 100vw;
height: auto;
background-color: #222;
position: fixed;
z-index: 1;
overflow-y: auto;
max-height: 100vh;
overflow-x: hidden;
}
nav {
display: none;
z-index: 2;
}
.title-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
width: 100vw;
padding: 0 10px;
}
/* menu base styles */
nav ul {
list-style-type: none;
}
nav li {
height: 50px;
}
.title-wrapper>a {
font-size: 16px;
}
a {
color: #999;
}
nav a {
text-decoration: none;
display: flex;
align-items: center;
justify-content: flex-start;
height: 100%;
font-size: 14px;
padding-left: 10px;
}
nav a:hover {
color: #fff;
}
/* Menu Toggle Styling */
.menu-toggle {
font-size: 26px;
color: #fff;
cursor: pointer;
padding: 0 15px 0 10px;
display: flex;
align-items: center;
justify-content: center;
}
.menu-toggle-button {
padding: inherit;
}
.nav-dropdown {
display: inline-block;
margin-bottom: 150px;
}
#media screen and (min-width: 930px) {
nav ul {
display: flex;
background-color: #222;
}
/* Header Content */
.header-container {
display: flex;
justify-content: center;
align-items: center;
overflow: visible;
}
.menu-toggle {
display: none;
}
.header-wrapper {
max-width: 1200px;
width: 100%;
display: flex;
justify-content: center;
padding: 0 20px;
}
.header-title {
font-size: 18px;
}
#nav-bar {
width: 70%;
display: inline-flex;
justify-content: space-between;
}
a {
padding: 0 1rem;
}
.nav-dropdown {
position: relative;
}
.nav-dropdown-menu {
display: none;
position: absolute;
z-index: 2;
}
.nav-dropdown:hover>.nav-dropdown-menu {
display: block;
}
.nav-dropdown {
margin-bottom: 0;
}
}
<body>
<header class="nav-wrapper header-container">
<div class="header-wrapper">
<div class="title-wrapper">
<a>Chemical Finger Print Analysis</a>
<div class="menu-toggle">
<span id="menu-toggle-button" onclick="NavToggle()">☰</span>
</div>
</div>
<nav id="nav-bar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Data</li>
<li>Reports</li>
</ul>
<ul>
<li class="nav-dropdown">Account
<ul class="nav-dropdown-menu">
<li>Account</li>
<li>Order History</li>
<li>Wishlist</li>
</ul>
</li>
<li>Login</li>
</ul>
</nav>
</div>
</header>
</body>
Or see this fiddle.
Related
I am having trouble getting this to work.
The idea is that when the #menuBtn is clicked (checkbox is true) it should change the display of the #menuOverlay to block instead of none. I've checked it out while using a visible checkbox, and it works just as it should when clicking the label icons (turning true/false), but it won´t change the display from none to block on true no matter what I do. Is there anyone that have any advice to what I am doing wrong?
Html:
<div class="menu_overlay" id="menuOverlay">
<label for="menuBtn">
<i class="fas fa-times"></i>
</label>
<ul>
<li>Work</li>
<li>Illustrations</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="container-outer">
<div class="container">
<div class="brandmark">Logo</div>
<input type="checkbox" name="" id="menuBtn">
<div class="landing_page">
<div class="menu">
<label for="menuBtn">
<i class="fas fa-bars"></i>
</label>
</div>
</div>
</div>
</div>
css (scss):
body {
font-family: 'Poppins', sans-serif;
background: white;
width: 100vw;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* MENU */
.container-outer {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
position: fixed;
}
.container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 90%;
height: 6vh;
position: relative;
}
.menu_overlay {
z-index: 100;
height: 100vh;
width: 100vw;
position: absolute;
background: white;
ul {
list-style: none;
display: flex;
flex-direction: column;
text-align: right;
margin: 75px 0 0 0;
padding: 0 2% 0 0;
}
.fas {
text-align: right;
right: 25px;
top: 25px;
position: absolute;
}
}
.landing-page {
max-height: 100vh;
height: 100%;
width: 100%;
position: relative;
}
.menu-text { // This is for the fonts inside the menu pop up
-webkit-text-stroke: 2px black;
color: white;
font-family: 'Poppins', sans-serif;
font-size: 5em;
font-weight: bold;
text-decoration: none;
}
.menu_overlay a:hover { // This is for the fonts inside the menu to fill black on hover
color: black;
}
.fas { // This is for the hamburger menu icon
font-size: 2rem;
color: black;
cursor: pointer;
}
.fas:hover { // This is for hover effect on the hambuger menu icon
transform: scale(1.1);
}
.active { // Active page filled with black in menu overlay
color: black;
}
#menuBtn {
display: none; //
}
#menuBtn:checked ~ .menu_overlay {
display: block;
}
#menuOverlay {
display: none;
}
.brandmark {
color: black;
font-family: 'Poppins', sans-serif;
font-weight: bold;
font-size: 1em;
text-transform: uppercase;
width: 100%;
display: flex;
align-items: center;
z-index: 101;
}
JS
var x = document.getElementById("menuBtn")
var menu = document.getElementsById("menuOverlay")
if (x = true) {
menu.style.display = "block";
console.log('this is if');
} else {
menu.style.display = "none";
console.log('this is else');
}
}
getElementById no getElementsById
var x = document.getElementById("menuBtn")
var menu = document.getElementById("menuOverlay")
I made my own responsive footer without any css framework but on mobile view it becomes toggle.
The problem is when i toggle the button it toggles downward, not upward. Thank you.
Please check the code snippet if how do I deal on toggling upward.
If you guys think there is more appropriate and good approach to make good responsive footer, it would gladly be much appreciated.
But in this case, I am just missing something. Thank you
$(document).ready(function() {
$(".footer-toggle-btn").click(function() {
if ($(this).text() == "☰") {
$(this).text("✖");
$('.footer-container').css('display', 'block');
} else {
$(this).text("☰");
$('.footer-container').css('display', 'block');
}
$("#footer li").toggle("slow");
});
});
.footer-container {
max-width: 1200px;
width: 90%;
padding: 0px 5%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
}
.footer-container li {
list-style-type: none;
}
.footer-container a {
text-decoration: none;
color: white;
}
.footer-container ul {
width: 65%;
display: block;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
nav {
width: 100vw;
}
.footer-toggle-btn {
display: none;
background-color: black;
color: white;
padding: 5px 0px;
height: auto;
width: 50px;
font-size: 23px;
border: 3px solid black;
cursor: pointer;
}
.footer-toggle-btn:hover {
background-color: black;
color: #f39700;
}
#media only screen and (max-width: 700px) {
#footer {
height: auto !important;
}
.footer-container {
display: block;
flex-direction: column;
width: 100%;
padding: 0;
}
.footer-container ul {
flex-direction: column;
align-items: flex-start;
width: 100%;
}
.footer-container a {
display: block;
padding-left: 15px;
}
.footer-container li {
margin: 0;
width: 100%;
height: 50px;
line-height: 50px;
}
.footer-container li:hover {
background-color: #f39700;
}
.footer-container li:hover a {
color: black;
font-weight: bold;
}
.footer-toggle-btn {
display: block;
}
}
#footer {
background-color: black;
height: 100px;
display: flex;
justify-content: space-between;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="footer">
<footer class="footer-container">
<ul class="feed-list">
<li>TEST 1</li>
<li>TEST 2</li>
<li>TEST 3</li>
<li>TEST 4</li>
<li>TEST 5</li>
<button class="footer-toggle-btn">✖</button>
</ul>
</footer>
</section>
const toggle = document.getElementById('toggle');
window.onclick = function (event) {
if (event.target == toggle) {
toggle.checked = false;
}
};
.navbar {
background-color: #5f686d;
display: flex;
justify-content: flex-end;
position: fixed;
width: 100vw;
z-index: 2;
top: 0;
}
.navbar .desktop {
list-style-type: none;
padding: 0;
display: flex;
margin-left: auto;
margin-top: 10px;
margin-right: 1rem;
margin-bottom: 10px;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
text-transform: capitalize;
}
#logo {
width: 150px;
height: 50px;
margin-top: 15px;
margin-right: 30vw;
margin-left: 2vw;
}
.navbar li img{
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
padding: 0px;
}
/* Dropdown Button */
.dropbtn {
background-color: #5f686d;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
border: 1px solid #95bbdf;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
.navbar ul li i{
font-size: 2rem;
margin-right: 2rem;
}
.navbar ul li div{
padding: 0px !important;
}
.navbar .fa-sort-down{
font-size: 1.5rem;
color: whitesmoke;
}
.navbar ul li ,
.navbar ul li div{
padding: 10px;
color: whitesmoke;
margin: auto;
cursor: pointer;
}
.navbar ul li div:hover{
border: none;
text-decoration: none;
}
.navbar ul li a {
text-decoration: none;
color: white;
border-bottom: 2px solid transparent;
}
.navbar ul li a:hover {
color: #ea4c88;
transition: 200ms ease;
}
.navbar label {
font-size: 40px;
color: whitesmoke;
line-height: 70px;
display: flex;
flex-direction: row;
display: none;
justify-content: flex-end;
}
.navbar #toggle {
display: none;
}
ol {
display: none !important;
background-color: rgb(255, 255, 255);
border: 1px solid black;
border-top: none;
}
ol a{
color: black;
}
ol li:hover a{
color: white;
}
ol li:hover{
background-color: rgb(107, 103, 103);
}
/*navbar media*/
#media screen and (max-width: 1031px) {
.navbar {
align-items: center;
justify-content: center;
}
.navbar ul {
margin-right: auto;
margin-left: auto;
justify-content: space-between;
}
#logo {
margin: auto;
padding-left: 1.5rem;
}
.prof_name{
display: none;
}
}
#media screen and (max-width: 630px) {
.navbar {
flex-direction: column !important;
align-items: center;
justify-content: center;
}
.navbar {
align-items: flex-start;
justify-content: flex-start;
}
#logo {
margin: 0.5rem;
}
.navbar .desktop{
display: none !important;
}
.navbar ol {
flex-direction: column;
width: 100%;
justify-content: flex-start;
}
.navbar ol li {
display: flex;
justify-content: center;
font-size: 1.3em;
margin: 0;
}
.navbar label {
align-self: flex-end;
margin-right: 10px;
display: flex;
cursor: pointer;
color: white;
width: 40px;
position: fixed;
}
#toggle[type=checkbox]:checked ~ ol {
display: block !important;
}
.prof_name{
display: none;
}
}
<nav class="navbar">
<img id="logo"src="../assets/images/logo.png" alt="logo">
<label for="toggle"> ☰ </label>
<input type="checkbox" id="toggle">
<ul class="desktop">
<li> <i class="fas fa-home" title="Home"></i></li>
<li onclick="toggleDropdown()">
<img src="../assets/images/avatar-1577909__340.png" alt="img_you">
</li>
<div class="dropdown">
<button class="dropbtn">Ayo Alesh |ADMIN. <i class="fas fa-sort-down"></i></button>
<div class="dropdown-content">
Create User
Log out
User
Staff
</div>
</div>
</ul>
<ol>
<li>
Home
</li>
<li>Create User</li>
<li> Log out</li>
<li>User</li>
<li> Staff</li>
</ol>
</nav
I'm using a checkbox to show and hide hamburger navbar on mobile view. I'm trying to make sure that when ever a user clicks anywhere on the screen when the navbar is opened, the checkbox should get checked and navbar should hide. But instead the navbar won't even open,I found out windows.onclick triggers immediately i try to open the navbar.
Try document instead of window. There wasn't any code to hide .navbar and the use of event.target doesn't look like it was needed. event.target references the element that the user clicked which in this situation can be considered anything.
document.onclick = function(event) {
const tog = document.getElementById('toggle');
const nav = document.querySelector('.navbar');
tog.checked = true;
nav.style.display = 'none';
};
.navbar {
background-color: #5f686d;
display: flex;
justify-content: flex-end;
position: fixed;
width: 100vw;
z-index: 2;
top: 0;
}
.navbar .desktop {
list-style-type: none;
padding: 0;
display: flex;
margin-left: auto;
margin-top: 10px;
margin-right: 1rem;
margin-bottom: 10px;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
text-transform: capitalize;
}
#logo {
width: 150px;
height: 50px;
margin-top: 15px;
margin-right: 30vw;
margin-left: 2vw;
}
.navbar li img {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
padding: 0px;
}
/* Dropdown Button */
.dropbtn {
background-color: #5f686d;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
border: 1px solid #95bbdf;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
.navbar ul li i {
font-size: 2rem;
margin-right: 2rem;
}
.navbar ul li div {
padding: 0px !important;
}
.navbar .fa-sort-down {
font-size: 1.5rem;
color: whitesmoke;
}
.navbar ul li,
.navbar ul li div {
padding: 10px;
color: whitesmoke;
margin: auto;
cursor: pointer;
}
.navbar ul li div:hover {
border: none;
text-decoration: none;
}
.navbar ul li a {
text-decoration: none;
color: white;
border-bottom: 2px solid transparent;
}
.navbar ul li a:hover {
color: #ea4c88;
transition: 200ms ease;
}
.navbar label {
font-size: 40px;
color: whitesmoke;
line-height: 70px;
display: flex;
flex-direction: row;
display: none;
justify-content: flex-end;
}
.navbar #toggle {
display: none;
}
ol {
display: none !important;
background-color: rgb(255, 255, 255);
border: 1px solid black;
border-top: none;
}
ol a {
color: black;
}
ol li:hover a {
color: white;
}
ol li:hover {
background-color: rgb(107, 103, 103);
}
/*navbar media*/
#media screen and (max-width: 1031px) {
.navbar {
align-items: center;
justify-content: center;
}
.navbar ul {
margin-right: auto;
margin-left: auto;
justify-content: space-between;
}
#logo {
margin: auto;
padding-left: 1.5rem;
}
.prof_name {
display: none;
}
}
#media screen and (max-width: 630px) {
.navbar {
flex-direction: column !important;
align-items: center;
justify-content: center;
}
.navbar {
align-items: flex-start;
justify-content: flex-start;
}
#logo {
margin: 0.5rem;
}
.navbar .desktop {
display: none !important;
}
.navbar ol {
flex-direction: column;
width: 100%;
justify-content: flex-start;
}
.navbar ol li {
display: flex;
justify-content: center;
font-size: 1.3em;
margin: 0;
}
.navbar label {
align-self: flex-end;
margin-right: 10px;
display: flex;
cursor: pointer;
color: white;
width: 40px;
position: fixed;
}
#toggle[type=checkbox]:checked~ol {
display: block !important;
}
.prof_name {
display: none;
}
}
<nav class="navbar">
<img id="logo" src="../assets/images/logo.png" alt="logo">
<label for="toggle"> ☰ </label>
<input type="checkbox" id="toggle">
<ul class="desktop">
<li>
<i class="fas fa-home" title="Home"></i>
</li>
<li onclick="toggleDropdown()">
<img src="../assets/images/avatar-1577909__340.png" alt="img_you">
</li>
<div class="dropdown">
<button class="dropbtn">Ayo Alesh |ADMIN. <i class="fas fa-sort-down"></i></button>
<div class="dropdown-content">
Create User
Log out
User
Staff
</div>
</div>
</ul>
<ol>
<li>
Home
</li>
<li>Create User</li>
<li> Log out</li>
<li>User</li>
<li> Staff</li>
</ol>
</nav>
I frequently get these particular type of error in my code constantly which I will add a toggle function to the classList of an element with JavaScript and the code will toggle the class if I checked using the inspect element, but the class won't be effective to the element I add it to....
NOW MY PROBLEM IS :
In the code below at the media queries (max-width: 605px), I am trying to make a dropdown navigation. I added display:none to the #navbarp in the CSS and I added another class .open #navbarp { display:flex}, and I used the JavaScript to toggle the .open class. The JavaScript was toggling the class .open to the #navbarp but the CSS class wasn't effective -- the display: none wasn't changing to display:flex.
Please go to the link below to check the code
https://codepen.io/enipx/pen/zegJeP
var iconBtn = document.getElementById('icon-p');
var navbarp = document.getElementById('navbarp')
function openNav() {
iconBtn.classList.toggle('click');
navbarp.classList.toggle('open');
}
body {
font-family: arial;
margin: 0;
padding: 0;
}
/* ==== NAVBAR */
#navbar {
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
display: flex;
height: 60px;
align-items: center;
}
/* ==== NAVBAR ICON */
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 60px;
}
#navbar #icon-p:hover span {
background-color: #333;
}
#icon-p span {
width: 52px;
height: 6px;
border-radius: 3px;
margin-bottom: 6px;
background-color: gray;
transition: .4s;
}
.click .icon-1 {
transform: rotate(45deg) translate(9px, 7px);
}
.click .icon-2 {
opacity: 0;
}
.click .icon-3 {
transform: rotate(-45deg) translate(9px, -7px);
}
/* ==== NAVBAR ELEMENT */
#navbarp {
display: flex;
list-style: none;
margin-left: auto;
margin-right: 80px;
}
#navbarp .navbarpli {
padding: 10px 25px;
}
#navbarp .navbarpli a {
text-decoration: none;
font-size: 1.2em;
color: gray;
transition: .7s;
}
#navbarp .navbarpli a:hover {
color: #333;
}
/* ==== NAVBAR DROPDOWN */
#dropdown {
list-style-type: none;
background-color: #F7F1CF;
position: absolute;
align-items: center;
width: 200px;
margin-top: 18px;
display: none;
animation-name: zoom;
animation-duration: .1s;
}
#keyframes zoom {
from {
transform: scale(.9);
}
to {
transform: scale(1);
}
}
#dropdown li {
margin: 0;
margin-left: -40px;
padding: 15px 10px;
}
#dropdown li:hover {
background-color: #E2DCBB;
}
#dropdownBtn:hover #dropdown {
display: block;
}
/* ==== media 910px */
#media (max-width: 910px) {
#navbarp {
margin-right: 30px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 30px;
}
}
#media (max-width: 800px) {
#navbarp {
margin-right: 20px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 20px;
}
#navbarp .navbarpli {
padding: 10px 20px;
}
#navbarp .navbarpli a {
font-size: 1.1em;
}
}
/* ==== media 700px */
#media (max-width: 706px) {
#navbarp {
margin-right: 5px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 10px;
}
#navbarp .navbarpli {
padding: 10px 18px;
}
#navbarp .navbarpli a {
font-size: 1em;
}
}
/* ==== media 605px */
#media (max-width: 605px) {
#navbar {
flex-direction: column;
}
#navbarp {
flex-direction: column;
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
width: 100%;
height: 0;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
display: none;
overflow: hidden;
}
.open #navbarp {
display: flex;
}
#navbarp .navbarpli {
padding: 20px 0px;
}
#navbarp .navbarpli a {
font-size: 1.2em;
}
#navbar #icon-p {
margin: 0px;
margin: 12px 0;
}
#dropdown {
text-align: center;
margin-top: 10px;
right: 30%;
}
}
<div id="navbar">
<div id="icon-p" onclick="openNav()">
<span class="icon-1"></span>
<span class="icon-2"></span>
<span class="icon-3"></span>
</div>
<ul id="navbarp">
<li class="navbarpli">Home</li>
<li class="navbarpli">Explore</li>
<li class="navbarpli">Filter</li>
<li class="navbarpli" id="dropdownBtn">Discover
<ul id="dropdown">
<li>By Age</li>
<li>By User</li>
<li>By Name</li>
<li>By State</li>
</ul>
</li>
<li class="navbarpli">Affiliate</li>
<li class="navbarpli">More</li>
</ul>
</div>
Change .open #navbarp to #navbarp.open (no space between #navbarp and .open). The former targets an element with id navbarp whose parent has the class .open. Using the latter (with no space) targets the element with both the ID and the class.
Remove the height: 0 and the overflow: hidden. These are making the elements disappear, even though display: flex is being applied. You shouldn't need them, because you have display: none which makes them totally disappear when they are supposed to be hidden.
var iconBtn = document.getElementById('icon-p');
var navbarp = document.getElementById('navbarp')
function openNav() {
iconBtn.classList.toggle('click');
navbarp.classList.toggle('open');
}
body {
font-family: arial;
margin: 0;
padding: 0;
}
/* ==== NAVBAR */
#navbar {
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
display: flex;
height: 60px;
align-items: center;
}
/* ==== NAVBAR ICON */
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 60px;
}
#navbar #icon-p:hover span {
background-color: #333;
}
#icon-p span {
width: 52px;
height: 6px;
border-radius: 3px;
margin-bottom: 6px;
background-color: gray;
transition: .4s;
}
.click .icon-1 {
transform: rotate(45deg) translate(9px, 7px);
}
.click .icon-2 {
opacity: 0;
}
.click .icon-3 {
transform: rotate(-45deg) translate(9px, -7px);
}
/* ==== NAVBAR ELEMENT */
#navbarp {
display: flex;
list-style: none;
margin-left: auto;
margin-right: 80px;
}
#navbarp .navbarpli {
padding: 10px 25px;
}
#navbarp .navbarpli a {
text-decoration: none;
font-size: 1.2em;
color: gray;
transition: .7s;
}
#navbarp .navbarpli a:hover {
color: #333;
}
/* ==== NAVBAR DROPDOWN */
#dropdown {
list-style-type: none;
background-color: #F7F1CF;
position: absolute;
align-items: center;
width: 200px;
margin-top: 18px;
display: none;
animation-name: zoom;
animation-duration: .1s;
}
#keyframes zoom {
from {
transform: scale(.9);
}
to {
transform: scale(1);
}
}
#dropdown li {
margin: 0;
margin-left: -40px;
padding: 15px 10px;
}
#dropdown li:hover {
background-color: #E2DCBB;
}
#dropdownBtn:hover #dropdown {
display: block;
}
/* ==== media 910px */
#media (max-width: 910px) {
#navbarp {
margin-right: 30px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 30px;
}
}
#media (max-width: 800px) {
#navbarp {
margin-right: 20px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 20px;
}
#navbarp .navbarpli {
padding: 10px 20px;
}
#navbarp .navbarpli a {
font-size: 1.1em;
}
}
/* ==== media 700px */
#media (max-width: 706px) {
#navbarp {
margin-right: 5px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 10px;
}
#navbarp .navbarpli {
padding: 10px 18px;
}
#navbarp .navbarpli a {
font-size: 1em;
}
}
/* ==== media 605px */
#media (max-width: 605px) {
#navbar {
flex-direction: column;
}
#navbarp {
flex-direction: column;
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
width: 100%;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
display: none;
}
.open#navbarp {
display: flex;
}
#navbarp .navbarpli {
padding: 20px 0px;
}
#navbarp .navbarpli a {
font-size: 1.2em;
}
#navbar #icon-p {
margin: 0px;
margin: 12px 0;
}
#dropdown {
text-align: center;
margin-top: 10px;
right: 30%;
}
}
<div id="navbar">
<div id="icon-p" onclick="openNav()">
<span class="icon-1"></span>
<span class="icon-2"></span>
<span class="icon-3"></span>
</div>
<ul id="navbarp">
<li class="navbarpli">Home</li>
<li class="navbarpli">Explore</li>
<li class="navbarpli">Filter</li>
<li class="navbarpli" id="dropdownBtn">Discover
<ul id="dropdown">
<li>By Age</li>
<li>By User</li>
<li>By Name</li>
<li>By State</li>
</ul>
</li>
<li class="navbarpli">Affiliate</li>
<li class="navbarpli">More</li>
</ul>
</div>
Selector in CSS part for the case when #navbarp has open class is written wrong. Currently, it is saying for any children of the parent that has class open and id equal navbarp apply this rule (like here https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator). While the intent is that element over which rule should be applied, should contain has both id equal navbarp and class open.
So changing, .open #navbarp to .open#navbarp will fix an issue.
Better to use only one class for everything
const The_NavBar = document.getElementById('navbar');
document.getElementById('icon-p').onclick = function()
{
The_NavBar.classList.toggle('navOpen')
}
body {
font-family: arial;
margin: 0;
padding: 0;
}
/* ==== NAVBAR */
#navbar {
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
display: flex;
height: 60px;
align-items: center;
}
/* ==== NAVBAR ICON */
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 60px;
}
#navbar #icon-p:hover span {
background-color: #333;
}
#icon-p span {
width: 52px;
height: 6px;
border-radius: 3px;
margin-bottom: 6px;
background-color: gray;
transition: .4s;
}
#navbar.navOpen #icon-p span:nth-child(1) {
transform: rotate(45deg) translate(9px, 7px);
}
#navbar.navOpen #icon-p span:nth-child(2) {
opacity: 0;
}
#navbar.navOpen #icon-p span:nth-child(3) {
transform: rotate(-45deg) translate(9px, -7px);
}
/* ==== NAVBAR ELEMENT */
#navbarp {
display: flex;
list-style: none;
margin-left: auto;
margin-right: 80px;
}
#navbarp .navbarpli {
padding: 10px 25px;
}
#navbarp .navbarpli a {
text-decoration: none;
font-size: 1.2em;
color: gray;
transition: .7s;
}
#navbarp .navbarpli a:hover {
color: #333;
}
/* ==== NAVBAR DROPDOWN */
#dropdown {
list-style-type: none;
background-color: #F7F1CF;
position: absolute;
align-items: center;
width: 200px;
margin-top: 18px;
display: none;
animation-name: zoom;
animation-duration: .1s;
}
#keyframes zoom {
from {
transform: scale(.9);
}
to {
transform: scale(1);
}
}
#dropdown li {
margin: 0;
margin-left: -40px;
padding: 15px 10px;
}
#dropdown li:hover {
background-color: #E2DCBB;
}
#dropdownBtn:hover #dropdown {
display: block;
}
/* ==== media 910px */
#media (max-width: 910px) {
#navbarp {
margin-right: 30px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 30px;
}
}
#media (max-width: 800px) {
#navbarp {
margin-right: 20px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 20px;
}
#navbarp .navbarpli {
padding: 10px 20px;
}
#navbarp .navbarpli a {
font-size: 1.1em;
}
}
/* ==== media 700px */
#media (max-width: 706px) {
#navbarp {
margin-right: 5px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 10px;
}
#navbarp .navbarpli {
padding: 10px 18px;
}
#navbarp .navbarpli a {
font-size: 1em;
}
}
/* ==== media 605px */
#media (max-width: 605px) {
#navbar {
flex-direction: column;
}
#navbarp {
flex-direction: column;
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
width: 100%;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
display: none;
}
#navbar.navOpen #navbarp {
/* .open#navbarp */
display: flex;
}
#navbarp .navbarpli {
padding: 20px 0px;
}
#navbarp .navbarpli a {
font-size: 1.2em;
}
#navbar #icon-p {
margin: 0px;
margin: 12px 0;
}
#dropdown {
text-align: center;
margin-top: 10px;
right: 30%;
}
}
<div id="navbar">
<div id="icon-p">
<span></span>
<span></span>
<span></span>
</div>
<ul id="navbarp">
<li class="navbarpli">Homes</li>
<li class="navbarpli">Explore</li>
<li class="navbarpli">Filter</li>
<li class="navbarpli" id="dropdownBtn">Discover
<ul id="dropdown">
<li>By Age</li>
<li>By User</li>
<li>By Name</li>
<li>By State</li>
</ul>
</li>
<li class="navbarpli">Affiliate</li>
<li class="navbarpli">More</li>
</ul>
</div>
Hi currently doing a quick website, got the header and toggle navigation in place, however due to the fact the nav bar is fixed it wont allow scrolling on the nav if the navbar is taller than the height of the screen, tried the overflow: scroll and position relative but cannot seem to find a work around, appreciate any assistance provided.
function NavToggle() {
var tn = document.getElementById("nav-bar")
if(tn.style.display === "none"){
tn.style.display = "block";
} else {
tn.style.display = "none";
}
}
*{
box-sizing: border-box;
font-family: sans-serif;
margin: 0;
padding: 0;
}
html, body{
overflow-y: auto;
}
ul{
margin: 0;
padding: 0;
}
/* Header and Navigation */
header{
width: 100vw;
height: auto;
background-color: #222;
position: fixed;
z-index: 1;
}
nav{
display: none;
z-index: 2;
}
.title-wrapper{
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
width: 100vw;
padding: 0 10px;
}
/* menu base styles */
nav ul{
list-style-type: none;
}
nav li{
height: 50px;
}
.title-wrapper>a{
font-size: 16px;
}
a{
color: #999;
}
nav a{
text-decoration: none;
display: flex;
align-items: center;
justify-content: flex-start;
height: 100%;
font-size: 14px;
padding-left: 10px;
}
nav a:hover{
color: #fff;
}
/* Menu Toggle Styling */
.menu-toggle{
font-size: 26px;
color: #fff;
cursor: pointer;
padding: 0 15px 0 10px;
display: flex;
align-items: center;
justify-content: center;
}
.menu-toggle-button{
padding: inherit;
}
<header class="nav-wrapper header-container">
<div class="header-wrapper">
<div class="title-wrapper">
<a class="a-tag header-title">Chemical Finger Print Analysis</a>
<div class="menu-toggle">
<span id="menu-toggle-button" onclick="NavToggle()">☰</span>
</div>
</div>
<nav id="nav-bar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Data</li>
<li>Reports</li>
</ul>
<ul>
<li>Register</li>
<li>Login</li>
</ul>
</nav>
</div>
</header>
Just add overflow-y: auto;max-height: 100vh; to .header like this:
function NavToggle() {
var tn = document.getElementById("nav-bar")
if(tn.style.display === "none"){
tn.style.display = "block";
}
else{
tn.style.display = "none";
}
}
html, body{
overflow-y: auto;
}
ul {
margin: 0;
padding: 0;
}
/* Header and Navigation */
header {
width: 100vw;
height: auto;
background-color: #222;
position: fixed;
z-index: 1;
overflow-y: auto;
overflow-x: hidden;
max-height: 100vh;
}
nav {
display: none;
z-index: 2;
}
.title-wrapper{
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
width: 100vw;
padding: 0 10px;
}
/* menu base styles */
nav ul{
list-style-type: none;
}
nav li{
height: 50px;
}
.title-wrapper>a{
font-size: 16px;
}
a{
color: #999;
}
nav a{
text-decoration: none;
display: flex;
align-items: center;
justify-content: flex-start;
height: 100%;
font-size: 14px;
padding-left: 10px;
}
nav a:hover{
color: #fff;
}
/* Menu Toggle Styling */
.menu-toggle{
font-size: 26px;
color: #fff;
cursor: pointer;
padding: 0 15px 0 10px;
display: flex;
align-items: center;
justify-content: center;
}
.menu-toggle-button{
padding: inherit;
}
<header class="nav-wrapper header-container">
<div class="header-wrapper">
<div class="title-wrapper">
<a class="a-tag header-title">Chemical Finger Print Analysis</a>
<div class="menu-toggle">
<span id="menu-toggle-button" onclick="NavToggle()">☰</span>
</div>
</div>
<nav id="nav-bar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Data</li>
<li>Reports</li>
</ul>
<ul>
<li>Register</li>
<li>Login</li>
</ul>
</nav>
</div>
</header>
Hope this will help you.
You have made the entire <header> fixed but you need to make title-wrapper as fixed, Here is working code
function NavToggle() {
var tn = document.getElementById("nav-bar")
if (tn.style.display === "none") {
tn.style.display = "block";
} else {
tn.style.display = "none";
}
}
* {
box-sizing: border-box;
font-family: sans-serif;
margin: 0;
padding: 0;
}
html,
body {
overflow-y: auto;
}
ul {
margin: 0;
padding: 0;
}
/* Header and Navigation */
header {
width: 100vw;
height: auto;
background-color: #222;
position: relative;
z-index: 1;
}
nav {
display: none;
z-index: 2;
}
.title-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
width: 100vw;
padding: 0 10px;
position: fixed;
background-color: #222222;
}
/* menu base styles */
nav ul {
list-style-type: none;
}
nav li {
height: 50px;
}
.title-wrapper>a {
font-size: 16px;
}
a {
color: #999;
}
nav a {
text-decoration: none;
display: flex;
align-items: center;
justify-content: flex-start;
height: 100%;
font-size: 14px;
padding-left: 10px;
}
nav a:hover {
color: #fff;
}
/* Menu Toggle Styling */
.menu-toggle {
font-size: 26px;
color: #fff;
cursor: pointer;
padding: 0 15px 0 10px;
display: flex;
align-items: center;
justify-content: center;
}
.menu-toggle-button {
padding: inherit;
}
<header class="nav-wrapper header-container">
<div class="header-wrapper">
<div class="title-wrapper">
<a class="a-tag header-title">Chemical Finger Print Analysis</a>
<div class="menu-toggle">
<span id="menu-toggle-button" onclick="NavToggle()">☰</span>
</div>
</div>
<nav id="nav-bar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Data</li>
<li>Reports</li>
</ul>
<ul>
<li>Register</li>
<li>Login</li>
</ul>
</nav>
</div>
</header>