Develop Reference

JavaScript: checked "true" won't change display to block, as it is stated to do in the function (closed)

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")

Open <li> tag of footer upward on toggle during mobile view (no added css framework)

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>

HTML and Javascript "Hamburger Menu" does not work

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>

windows.onclick keeps clicking automatically

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>

Responsive Navigation - flexbox dropdowns causing overflow

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.