When i click the mavbar toggler button, the toggler does not appear, it pops out immediately
i have seen this in youtube tutorial it was working fine for him but when i try it the toggler does not show, i don't know what the issue is and i checked the code also the code same
can anyone help to get rid of this issue
thanks in advance
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #195794;
padding: 0 !important;
}
.brand-title {
font-size: 1.5rem;
margin: 1rem;
color: white;
}
.navbar-links ul {
display: flex;
margin: 0;
}
.navbar-links ul li {
list-style: none;
}
.navbar-links ul li a {
text-decoration: none;
color: white;
padding: 1.2rem;
display: block;
}
.navbar-links ul li:hover {
background-color: #1d64aa;
}
.toggle-button {
position: absolute;
top: 1.3rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 2rem;
height: 1.4rem;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media(max-width:800px) {
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links.active {
display: flex;
}
}
<nav class="navbar">
<div class="brand-title"> title</div>
<a href="" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</nav>
Problem is in the JS
You need to disable a link by
toggleButton.addEventListener('click', (e) => {
e.preventDefault();
navbarLinks.classList.toggle('active')
})
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', (e) => {
e.preventDefault();
navbarLinks.classList.toggle('active')
})
.navbar{
display: flex;
justify-content: space-between;
align-items: center;
background-color: #195794;
padding: 0 !important;
}
.brand-title{
font-size: 1.5rem;
margin: 1rem;
color: white;
}
.navbar-links ul{
display: flex;
margin: 0;
}
.navbar-links ul li{
list-style: none;
}
.navbar-links ul li a{
text-decoration: none;
color: white;
padding: 1.2rem;
display: block;
}
.navbar-links ul li:hover{
background-color: #1d64aa;
}
.toggle-button{
position: absolute;
top: 1.3rem;
right:1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 2rem;
height: 1.4rem;
}
.toggle-button .bar{
height:3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media(max-width:800px){
.toggle-button{
display: flex;
}
.navbar-links{
display: none;
width: 100%;
}
.navbar{
flex-direction: column;
align-items: flex-start;
}
.navbar-links ul{
width: 100%;
flex-direction: column;
}
.navbar-links ul li{
text-align: center;
}
.navbar-links.active{
display: flex;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="Site.css">
</head>
<body>
<nav class="navbar">
<div class="brand-title"> title</div>
<a href="" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</nav>
<script src="Site.js"></script>
</body>
</html>
Check your .toggle-button
<a href="" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
Change it to div :
<div class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
Change your .toggle-button CSS:
.toggle-button:hover{
cursor: pointer
}
Related
I am trying to make the so-called "Hambuger menu" which appears very well but when I click it nothing happens.
I have an event listener to listen for any click on that button and then according it would toggle the class to show or hide the ul elements.
I can't find the mistake myself. Is there even a simpler way?
const toggleButton = document.getElementsByClassName('toggle-button')[0];
const navbarLinks = document.getElementsByClassName('navbar-links')[0];
toggleButton.addEventListener('click' ,function (){
navbarLinks.classList.toggle('active')
});
/* Basic/Boiler css */
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
}
/* nav bar */
.navbar{
display: flex;
justify-content: space-between;
align-items: center;
background: #000;
color: white;
}
.navbar-logo{
width: 10rem;
height: 3rem;
margin: 0.5rem;
border-radius: 4px;
}
.navbar-links ul{
margin: 0;
padding: 0;
display: flex;
}
.navbar-links li{
list-style: none;
transition: font-size 0.5s ease-out 100ms;
}
.navbar-links li a{
text-decoration: none;
color: white;
padding-right: 1rem;
display: block;
}
.navbar-links li:hover{
font-size: 1.4rem;
}
/* Responsive Navbar */
.toggle-button{
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar{
height: 3px;
width: 100%;
background: white;
border-radius: 10px;
}
#media (max-width: 650px){
.toggle-button{
display: flex;
}
.navbar-links{
width: 100%;
}
.navbar-links ul{
flex-direction: column;
width: 100%;
display: none;
}
.navbar-links li a{
padding: 10px;
}
.navbar-links li{
text-align: center;
}
.navbar{
flex-direction: column;
align-items: flex-start;
}
.navbar-links.active{
display: flex;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="icon" href="/logo.png" type="image/jpg">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<div class="brand-titel"><img class="navbar-logo" src="/logo.png" alt="logo"></div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<script src="front.js"></script>
</body>
</html>
I repeat Again The hamburger appers alright but when i click it it dose not respond
You forgot to add class .active in your CSS file. Also, your .navbar-links should have display:none; instead of its list.
const toggleButton = document.getElementsByClassName('toggle-button')[0];
const navbarLinks = document.getElementsByClassName('navbar-links')[0];
toggleButton.addEventListener('click', function() {
navbarLinks.classList.toggle('active');
});
/* Basic/Boiler css */
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
/* nav bar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background: #000;
color: white;
}
.navbar-logo {
width: 10rem;
height: 3rem;
margin: 0.5rem;
border-radius: 4px;
}
.navbar-links ul {
margin: 0;
padding: 0;
display: flex;
}
.navbar-links li {
list-style: none;
transition: font-size 0.5s ease-out 100ms;
}
.navbar-links li a {
text-decoration: none;
color: white;
padding-right: 1rem;
display: block;
}
.navbar-links li:hover {
font-size: 1.4rem;
}
/* Responsive Navbar */
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background: white;
border-radius: 10px;
}
#media (max-width: 650px) {
.toggle-button {
display: flex;
}
.navbar-links {
width: 100%;
display: none;
}
.active {
display: block;
padding: 25px;
color: white;
font-size: 25px;
box-sizing: border-box;
}
.navbar-links ul {
flex-direction: column;
width: 100%;
}
.navbar-links li a {
padding: 10px;
}
.navbar-links li {
text-align: center;
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar-links .active {
display: flex;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="icon" href="/logo.png" type="image/jpg">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<div class="brand-titel"><img class="navbar-logo" src="/logo.png" alt="logo"></div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<script src="front.js"></script>
</body>
</html>
You have set the style for the ul as display: none. display: none needs to be overridden when the active class is applied.
Add this rule ul {display: flex} at the end of the media query, your code should look something like this:
#media (max-width: 650px){
...
.navbar-links.active ul{
display: flex
}
}
I'm a beginner and trying to make this page but there's some blank space below all the content and I don't know why. And my sidebar doesn't show at all too. What could it be? My browser show exactly like the pic and that's not how I supposed to design the page.
The first part
The last part with the blank space at the end
Here is the code
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;500;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto';
}
html, body {
height: 100%;
}
.main {
display: flex;
flex-direction: row;
height: 100%;
}
.sidebar {
display: block;
background-color: #2c333a;
height: 100%;
width: 120px;
color: rgba(255, 255, 255, 0.5);
}
.sidebar-content {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.sidebar-content a {
text-decoration: none;
color: rgba(255, 255, 255, 0.5);
}
.sidebar-content ul li:first-child {
background-color: orange;
}
.sidebar-content ul {
width: 100%;
list-style: none;
justify-content: center;
}
.icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
ul li {
display: flex;
justify-content: center;
align-items: center;
padding: 17px 0;
}
.teste {
display: flex;
flex-direction: column;
height: 100%;
width: calc(100% - 120px);
}
.header {
background-color: #fff;
display: flex;
height: 82px;
justify-content: center;
align-items: center;
color: #495057;
font-weight: 300;
}
.header h1 {
font-weight: 700;
}
.header-content {
padding: 0 10px;
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}
.header-right {
display: flex;
justify-content: center;
align-items: center;
}
.header-right p {
margin-right: 20px;
}
.header-right button {
font-size: 16px;
font-weight: 400;
background-color: #fff;
color: blue;
border: 1px solid blue;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
.main-content {
background-color: #F0F2F7;
height: calc(100% - 82px);
width: 100%;
padding: 10px;
}
<!DOCTYPE html>
<html lang="ptBR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles/styles.css" />
<link rel="stylesheet" href="styles/icons/flaticon.css" />
<script src="https://kit.fontawesome.com/5c8fa193c0.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="main">
<div class="sidebar">
<div class="sidebar-content">
<ul>
<li><i class="fas fa-mask fa-3x" style="color: white"></i></li>
<li><a href="#">
<div class="icon"><i class="flaticon-superman"></i></div>
<p>Heróis</p>
</a></li>
<li><a href="#">
<div class="icon"><i class="flaticon-joker"></i></div>
<p>Vilões</p>
</a></li>
<li><a href="#">
<div class="icon"><i class="flaticon-marvel"></i></div>
<p>Marvel</p>
</a></li>
<li><a href="#">
<div class="icon"><i class="flaticon-dc"></i></div>
<p>DC Comics</p>
</a></li>
<li><a href="#">
<div class="icon"><i class="flaticon-r2d2"></i></div>
<p>Star Wars</p>
</a></li>
<li><a href="#">
<div class="icon"><i class="flaticon-question"></i></div>
<p>Dúvidas</p>
</a></li>
</ul>
</div>
</div>
<div class="teste">
<div class="header">
<div class="header-content">
<h1>Página Teste</h1>
<div class="header-right">
<p>New Post</p>
<p>Sign up</p>
<p><button>Login</button></p>
</div>
</div>
</div>
<div class="main-content">
<h1>Teste</h1>
</div>
</div>
</div>
</body>
</html>
I want to use a .js script in my html file, but unfortunately my script does not work the right way :(. I build a responsive Navbar for my website with a "hamburger Menu" on small screensizes.
I managed it to show the "Hamburger Menu" on a smaller screensize but my navbarlinks don't show up if I click on it. Here my html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", "initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<script src="script/script.js"></script>
<title>Title</title>
</head>
<header>
<nav class="navbar">
<div class="branding">
<img src="img/Logo.png" alt="Brand">
</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>Artikel</li>
<li>Shop</li>
<li>handel</li>
<li>Kontakt</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
here my css:
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header{
background-color: white;
padding-top: 10px;
min-height: 70px;
border-bottom: black 3px solid;
align-items: center;
}
.navbar{
width: 80%;
margin: auto;
overflow: hidden;
align-items: center;
}
.branding{
float: left;
margin: 0;
padding: 0;
}
.navbar-links{
margin-top: 25px;
padding: 0;
float: right;
}
.navbar-links ul{
margin: 0;
padding: 0;
display: flex;
list-style: none;
}
.navbar-links ul li a{
padding: 25px;
color: black;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 500;
}
.navbar-links a:hover{
color: #ffbf00;
}
.toggle-button{
margin-top: 20px;
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar{
height: 3px;
width: 100%;
color: black;
background-color: black;
border-radius: 10px;
}
#media (max-width: 1050px) {
.toggle-button{
display: flex;
}
.navbar-links{
display: none;
width: 100%;
}
.navbar{
flex-direction: column;
align-items: flex-start;
}
.navbar-links ul{
width: 100%;
flex-direction: column;
}
.navbar-links li{
text-align: center;
}
.navbar-links li a{
padding: .5rem 1rem;
}
.navbar-links.active{
display: flex;
}
}
and the important part I guess, my javascript:
const toggleButton = document.getElementsByClassName('toggleButton')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
Sry for the lot of code, but I want to find the mistake with your help so I post all of my code. Thanks
it will be toggle-button not toggleButton in
const toggleButton = document.getElementsByClassName('toggle-button')[0];
const toggleButton = document.getElementsByClassName('toggle-button')[0];
const navbarLinks = document.getElementsByClassName('navbar-links')[0];
console.log(toggleButton);
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header{
background-color: white;
padding-top: 10px;
min-height: 70px;
border-bottom: black 3px solid;
align-items: center;
}
.navbar{
width: 80%;
margin: auto;
overflow: hidden;
align-items: center;
}
.branding{
float: left;
margin: 0;
padding: 0;
}
.navbar-links{
margin-top: 25px;
padding: 0;
float: right;
}
.navbar-links ul{
margin: 0;
padding: 0;
display: flex;
list-style: none;
}
.navbar-links ul li a{
padding: 25px;
color: black;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 500;
}
.navbar-links a:hover{
color: #ffbf00;
}
.toggle-button{
margin-top: 20px;
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar{
height: 3px;
width: 100%;
color: black;
background-color: black;
border-radius: 10px;
}
#media (max-width: 1050px) {
.toggle-button{
display: flex;
}
.navbar-links{
display: none;
width: 100%;
}
.navbar{
flex-direction: column;
align-items: flex-start;
}
.navbar-links ul{
width: 100%;
flex-direction: column;
}
.navbar-links li{
text-align: center;
}
.navbar-links li a{
padding: .5rem 1rem;
}
.navbar-links.active{
display: flex;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", "initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<script src="script/script.js"></script>
<title>Title</title>
</head>
<header>
<nav class="navbar">
<div class="branding">
<img src="img/Logo.png" alt="Brand">
</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>Artikel</li>
<li>Shop</li>
<li>handel</li>
<li>Kontakt</li>
</ul>
</div>
</nav>
</header>
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>
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.