I have found a tutorial for a navigation menu with a logo to the left. But now I would like it to have the hamburger icon for mobile devices and I'm not sure how to do this. Unfortunately, I have been unable to find a tutorial online with my specific needs but have tried using a tutorial for a hamburger icon but had no luck and went back to the beginning.
<div class="container">
<div class="logo">
<img src="images/logo-large.png" alt="Nathan Ashbury Logo" class="image-1">
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Coding</li>
<li>Photography</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
```
.container {
clear: both;
overflow: auto;
}
nav {
background-color: rgba(18,7,88,1.00);
margin: 10px auto;
text-align: center;
width: 95%;
}
.logo img {
float: left;
width: 130px;
}
.image-2 {
display: none;
}
.image-3 {
display: none;
}
nav ul li {
display: inline-block;
padding: 10px;
font-size: 20px;
font-family: "Helvetica", sans-serif;
}
nav ul li a {
text-decoration: none;
color: #fff;
}
nav ul li a:hover {
text-transform: uppercase;
}
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<header>
<h1>Example: Creating a hamburger menu</h1>
<div class="top">
<i class="material-icons">dehaze</i>
</div>
</header>
<nav class="menu">
home
about
products
services
contact
</nav>
<main>
Site content.
</main>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
CSS
* { margin: 0 auto; font-family: sans-serif; }
body { margin: 0 auto; }
header {
height: 70px;
background-color: #3e739d;
border-bottom: 1px solid #494949;
display: flex;
align-items: center;
justify-content: center;
}
header > h1 {
width: calc(100% - 160px);
text-align: center;
font-size: 20px;
color: white;
}
header > .top {
position: absolute;
left: 20px;
}
header > .top a.menu_icon i {
color: #000;
font-size: 40px;
padding-top: 5px;
transition: .2s ease;
}
header > .top a.menu_icon:hover i {
color: #fff;
}
nav.menu {
width: 300px;
min-height: calc(100vh - 121px);
background-color: #03a9f4;
position: absolute;
left: -300px;
transition: .3s all;
}
nav.menu > a {
display: block;
padding: 5px;
margin: 15px 0 0px 20px;
color: #494949;
text-transform: uppercase;
}
main {
width: 100%;
padding: 30px;
box-sizing: border-box;
}
footer {
height: 50px;
background-color: #494949;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
bottom: 0;
position: fixed;
width: 100%;
}
.menu_show {
left: 0!important;
}
#media screen and (max-width: 425px) {
header h1 {
font-size: 16px;
}
}
#media screen and (max-width: 360px) {
nav.menu {
width: 100%;
left: -100%;
}
}
To activate the menu, displaying or hiding the navigation list when it
is clicked, we use the jQuery library. Here is the click event of the
button that contains the class top and jQuery's "toggleClass"
function, adding or removing the " menu_show" class from the menu,
making it visible or invisible, as follows:
$(document).ready(function() {
$("body").on('click', '.top', function() {
$("nav.menu").toggleClass("menu_show");
});
});
Related
I am currently trying to make a website. However, the problem that I am getting is that when I minimize the browser, Yes, it is being responsive, but the text is going over the other components on the website and I am unsure how to work around this issue as I am quite stumped at this error.
Image for more clarification:
Web error
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="https://unpkg.com/swiper#7/swiper-bundle.min.css" />
<link rel="stylesheet" href="jason.css">
</head>
<body>
<nav>
<div class="logo">Revolutionary Fitness</div>
<ul>
<div class="items">
<li>Home</li>
<li>Classes</li>
<li>Products</li>
<li>Login</li>
<li>Feedback</li>
</div>
</ul>
</nav>
<div class="background">
<div class="overlay">
<h3>Classes</h3>
<p>Insert Something Here...</p>
</div>
</div>
<div class="main">
<h1>Classes, coaches and community</h1>
<div class="main text">
<p>At Virgin Active, we do health and fitness differently. We have expertly crafted exercise experiences
that are the perfect blend of intelligent programming and feel-good movement. We've got everything from
Yoga to HIIT, so you can move your body any
way you want.
</p>
</div>
</div>
<section class="no.1" id="no.1">
<div class="section">
<img src="Yoga.jpg" alt="Yoga">
<div class="ClassText">
<h1>Yoga</h1>
<p>
Choose from Classes with dynamism,energy and athleticism, to an authentic and peaceful experience.
<br><br>
Classes include: Align,Flow and Calm SkyPark Yoga
<br><br>
Sign Up<span> to book this class</span>
</p>
</div>
</div>
</section>
<footer class="footer">
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-whatsapp"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<ul class="list">
<li>About Us</li>
<li>Contact Us</li>
<li>FAQs</li>
</ul>
<p class="copyright">
<small>©2022 Revolutionary Fitness</small>
</p>
</footer>
</body>
</html>
Css:
#import url("https://fonts.googleapis.com/css2?family=Nunito:wght#200;300;400;600&display=swap");
* {
font-family: 'Nunito', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background: #1b1b1b;
}
nav:after {
content: '';
clear: both;
display: table;
}
nav .logo {
float: left;
color: white;
font-size: 27px;
line-height: 70px;
padding-left: 60px;
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
float: right;
margin-right: 40px;
}
nav ul li {
display: inline-block;
background: #1b1b1b;
margin: 0 5px;
}
nav ul li a {
color: white;
text-decoration: none;
line-height: 70px;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover {
color: cyan;
}
nav ul ul li a:hover {
color: cyan;
box-shadow: none;
}
nav ul ul {
position: absolute;
top: 90px;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
.background {
background-color: #212529;
width: 100%;
height: 200px;
position: relative;
/* USE FLEXBOX */
display: flex;
align-items: center;
justify-content: flex-start;
/* ADD SOME PADDING FOR BETTER UI */
padding-inline: 16px; /* LEFT and Right */
}
.overlay {
height: 100%;
color: white;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: relative;
}
.overlay h3 {
margin-bottom: 20px;
color: crimson;
font-size: 20px;
}
.overlay p {
font-size: 35px;
}
.main h1 {
display: flex;
text-align: center;
justify-content: center;
margin-top: 20px;
font-size: 50px;
}
.text {
width: 50%;
height: 50px;
padding-top: 20px;
white-space: initial;
margin: 0 auto;
word-wrap: break-word;
}
body {
margin: 0;
font-family: sans-serif;
}
.section {
background-color: #F5F5F5;
display: flex;
justify-content: space-between;
padding: 40px;
width: 80%;
margin-top: 50px;
float: left;
}
.section img {
height: 250px;
}
.section h1 {
margin-left: 100px;
color: black;
}
.section p {
margin-left: 100px;
width: 55%;
height: 50px;
white-space: initial;
margin-left: 100px;
margin-top: 20px;
word-wrap: break-word;
}
.footer {
background-color: #000;
padding: 40px;
clear: both;
}
.footer .social {
text-align: center;
padding-bottom: 25px;
color: #4b4c4d;
}
.footer .social a {
display: inline-block;
height: 40px;
width: 40px;
background: #424242;
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer .social a:hover {
color: #24262b;
background-color: #ffffff;
}
.footer ul {
margin-top: 0;
padding: 0;
list-style: none;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
text-align: center;
}
.footer ul li a {
color: #fff;
text-decoration: none;
}
.footer ul li {
display: inline-block;
padding: 0 15px;
}
.footer .copyright {
margin-top: 15px;
text-align: center;
font-size: 20px;
color: #fff;
}
you can use css media query create responsive web page.
#media only screen and (min-width: 768px) {
.overlay h3 {
font-size: 16px;
}
.overlay p {
font-size: 25px;
}
}
#media only screen and (min-width: 1200px) {
.overlay h3 {
font-size: 22px;
}
.overlay p {
font-size: 40px;
}
}
Another way that is not recommended using viewport width and height
.overlay p {
font-size: 1.5vw;
}
I am trying to make a check box to check on and off the nav bar, but it floats behind my nav bar, so I can't actually see it. I've tried to play with margins and spacing, but can't seem to get it to work. Eventually, I want to change the nav and header background color to white, but have been playing around with black just to try to get it to appear. If there is also an ability to change the color of the checkbox, that would be incredible too.
Code:
/* general formatting starts here */
:root {
--gd2-blue: rgb(13, 192, 255);
--gd2-gray: #a1a1a1;
--header-color: black;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
/* navigation styles start here */
#gd2-ventures-logo {
width: 150px;
height: auto;
}
header {
background: var(--header-color);
text-align: center;
position: fixed;
z-index: 999;
width: 100%;
margin-top: -67px;
height: 97px;
}
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--header-color);
width: 100%;
display: none;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: var(--gd2-gray);
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
}
nav a:hover {
color: #000;
}
.nav-toggle:checked~nav {
display: block;
}
/* content styles start here */
.content {
height: 200vh;
background-color: var(--gd2-blue);
font-family: "Aldhabi", serif;
font-weight: 300;
}
h2 {
padding-top: 150px;
color: #ffffff;
text-align: center;
font-size: 40px;
}
<header>
<h1 class="logo">
<img id="gd2-ventures-logo" src="https://lh3.googleusercontent.com/RQ5b6Z9JKq5shKOTrkpM8mdlX3c0N270wCSMB-sCjuyumIXLMsbjQGUS14jmLE31ZJ8EGuFjrg4VAAolUIAnKjqTb6Z2yguvvtemLnNhEF0TGdo42Dtsj5lcsclEXS9GYIbdUWFFADo=w2400" alt="GD2 Ventures Logo">
</h1>
<input type="checkbox" class="nav-toggle">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Team</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="content">
<h2>GD<sup>2</sup> Ventures</h2>
</div>
Can't see the error to be honest.
/* general formatting starts here */
:root {
--gd2-blue: rgb(13, 192, 255);
--gd2-gray: #a1a1a1;
--header-color: white;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* navigation styles start here */
#gd2-ventures-logo {
width: 150px;
height: auto;
}
header {
background: var(--header-color);
text-align: center;
position: fixed;
width: 100%;
padding: 2rem 0;
display: flex;
justify-content: space-around;
}
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--header-color);
width: 100%;
display: none;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: var(--gd2-gray);
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
}
nav a:hover {
color: #000;
}
.nav-toggle:checked ~ nav{
display: block;
}
/* content styles start here */
.content {
height: 200vh;
background-color: var(--gd2-blue);
font-family: "Aldhabi", serif;
font-weight: 300;
}
h2 {
padding-top: 150px;
color: #ffffff;
text-align: center;
font-size: 40px;
}
<header>
<img id="gd2-ventures-logo" src="https://lh3.googleusercontent.com/RQ5b6Z9JKq5shKOTrkpM8mdlX3c0N270wCSMB-sCjuyumIXLMsbjQGUS14jmLE31ZJ8EGuFjrg4VAAolUIAnKjqTb6Z2yguvvtemLnNhEF0TGdo42Dtsj5lcsclEXS9GYIbdUWFFADo=w2400" alt="GD2 Ventures Logo">
<input type="checkbox" class="nav-toggle">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Team</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="content">
<h2>GD<sup>2</sup> Ventures</h2>
</div>
/* general formatting starts here */
:root {
--gd2-blue: rgb(13, 192, 255);
--gd2-gray: #a1a1a1;
--header-color: black;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
/* navigation styles start here */
#gd2-ventures-logo {
width: 150px;
height: auto;
}
header {
background: var(--header-color);
text-align: center;
position: fixed;
z-index: 999;
width: 100%;
margin-top: -40px;
}
nav {
text-align: left;
background: var(--header-color);
width: 100%;
display: none;
}
nav ul {
padding: 0px 0px 10px 10px;
list-style: none;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: var(--gd2-gray);
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
}
nav a:hover {
color: #000;
}
/* content styles start here */
.content {
height: 200vh;
background-color: var(--gd2-blue);
font-family: "Aldhabi", serif;
font-weight: 300;
}
h2 {
padding-top: 150px;
color: #ffffff;
text-align: center;
font-size: 40px;
}
.nav-toggle {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function myFunction() {
var checkBox = document.getElementById("nav-toggle");
var text = document.getElementById("nav");
if (checkBox.checked == true){
nav.style.display = "block";
} else {
nav.style.display = "none";
}
}
</script>
<header>
<h1 class="logo">
<img id="gd2-ventures-logo" src="https://lh3.googleusercontent.com/RQ5b6Z9JKq5shKOTrkpM8mdlX3c0N270wCSMB-sCjuyumIXLMsbjQGUS14jmLE31ZJ8EGuFjrg4VAAolUIAnKjqTb6Z2yguvvtemLnNhEF0TGdo42Dtsj5lcsclEXS9GYIbdUWFFADo=w2400" alt="GD2 Ventures Logo">
<div>
<input type="checkbox" id="nav-toggle" class="nav-toggle" onclick="myFunction()">
</div>
</h1>
<nav id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Team</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="content">
<h2>GD<sup>2</sup> Ventures</h2>
</div>
some device like iMac it look perfect but some i see white box in other pc.in tablet and mobile screen gets auto zoom its not fit to device i have to zoom out which makes content small.
* {
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f7f7f7;
color: #545454;
}
/* NAVIGATION */
.navbar {
width: 100%;
height: 150px;
background: black;
position: fixed;
top: 0;
left: 0;
padding: 0 25px;
}
.navbar .inner_navbar {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
}
.navbar .hamburger {
display: none;
}
.navbar .menu ul {
display: flex;
}
.navbar .menu ul li a {
display: block;
width: 120px;
margin-right: 10px;
text-align: center;
font-size: 14px;
text-transform: uppercase;
color: #fff;
padding: 10px;
border-radius: 25px;
letter-spacing: 2px;
transition: all 0.2s ease;
}
.navbar .menu ul li:last-child a {
margin-right: 0;
}
.navbar .menu ul li a:hover,
.navbar .menu ul li a.active {
background: #5db485;
}
.container {
margin-top: 150px;
width: 1906px;
height: 397px;
}
.promo {
width: 1906px;
}
/* Safari Tours*/
.safari-tours {
background: linear-gradient(to bottom, #65214a, #8d2353, #b52455, #db2c4f, #fd3f41);
;
width: 1906px;
}
.safari-title {
text-align: center;
padding-top: 30px;
font-size: 50px;
}
.banner {
display: flex;
justify-content: center;
}
.safari {
margin: 2%;
}
.safari img {
width: 500px;
}
/*Tablet*/
#media (max-width: 992px) {
.navbar {
height: 218px;
padding: 12px;
}
.navbar .inner_navbar {
flex-direction: column;
}
.container {
margin-top: 218px;
}
}
/*Mobile*/
#media (max-width: 728px) {
.navbar {
height: 150px;
}
.navbar .inner_navbar {
flex-direction: row;
}
.navbar .menu ul {
position: absolute;
top: 150px;
left: 0;
display: block;
background: orangered;
width: 100%;
}
.navbar .menu ul li {
padding: 10px;
}
.navbar .menu ul li a {
width: 100%;
padding: 12px;
}
.navbar .hamburger {
display: block;
position: absolute;
top: 15px;
right: 25px;
color: #fff;
font-size: 24px;
cursor: pointer;
transition: all 0.2s ease;
}
.navbar .menu {
display: none;
}
.navbar .menu.activate {
display: block;
}
.container {
margin-top: 150px;
width: 690px;
height: 144px;
}
.promo {
width: 690px;
}
.safari-tours {
background: linear-gradient(to bottom, #65214a, #8d2353, #b52455, #db2c4f, #fd3f41);
width: 690px;
}
.safari {
margin: 1%;
}
.safari img {
width: 300px;
}
}
<!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>Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="wrapper">
<div class="navbar">
<div class="inner_navbar">
<div class="logo">
<img src="/images/Final Logo.png" style="width: 150px;">
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Desert Safari</li>
<li>Tours</li>
<li>Activities</li>
<li>Contact-Us</li>
</ul>
</div>
</div>
<div class="hamburger">
<img src="/images/menu-btn.png" style="width: 40px;">
</div>
</div>
<div class="container">
<img class="promo" src="https://www.arabian-adventures.com/on/demandware.static/-/Sites-dnata-UAE-Library/default/dw922d22bf/images/slider/luxury-desert-camping-arabian-adventures-1920x400.jpg" alt="">
</div>
</div>
</header>
<section>
<div class="safari-tours">
<h1 class="safari-title">SAFARI TOURS</h1>
<div class="banner">
<div class="safari">
<img src="https://i.imgur.com/9QH8NFE.jpeg" alt="Morning Safari" />
</a>
</div>
<div class="safari">
<a href="https://bigdunestours.com/desert-safari" target="_top">
<img src="https://i.imgur.com/2E9ytwc.jpeg" alt="Evening Safari" />
</a>
</div>
</div>
</div>
</section>
<script>
var hamburger = document.querySelector(".hamburger");
var menu = document.querySelector(".menu");
hamburger.addEventListener("click", function() {
menu.classList.toggle("activate");
})
</script>
</body>
</html>
some device like iMac it look perfect but some i see white box in other pc.in tablet and mobile screen gets auto zoom its not fit to device i have to zoom out which makes content small.
edited i did try as one of the comment mention but still no luckk the results are something like this
*{
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #f7f7f7;
color: #545454;
}
/* NAVIGATION */
.navbar{
width: 100%;
height: 150px;
background: black;
position: fixed;
top: 0;
left: 0;
padding: 0 25px;
}
.navbar .inner_navbar{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
}
.navbar .hamburger{
display: none;
}
.navbar .menu ul{
display: flex;
}
.navbar .menu ul li a{
display: block;
width: 120px;
margin-right: 10px;
text-align: center;
font-size: 14px;
text-transform: uppercase;
color: #fff;
padding: 10px;
border-radius: 25px;
letter-spacing: 2px;
transition: all 0.2s ease;
}
.navbar .menu ul li:last-child a{
margin-right: 0;
}
.navbar .menu ul li a:hover,
.navbar .menu ul li a.active{
background: #5db485;
}
.container{
width: 100%;
max-width: 1906;
}
/*Tablet*/
#media (max-width: 992px){
.navbar{
height: 218px;
padding: 12px;
}
.navbar .inner_navbar{
flex-direction: column;
}
.container {
max-width: 991.98px;
}
}
/*Mobile*/
#media (max-width: 728px){
.navbar{
height: 150px;
}
.navbar .inner_navbar{
flex-direction: row;
}
.navbar .menu ul{
position: absolute;
top: 150px;
left: 0;
display: block;
background: orangered;
width: 100%;
}
.navbar .menu ul li{
padding: 10px;
}
.navbar .menu ul li a{
width: 100%;
padding: 12px;
}
.navbar .hamburger{
display: block;
position: absolute;
top: 15px;
right: 25px;
color: #fff;
font-size: 24px;
cursor: pointer;
transition: all 0.2s ease;
}
.navbar .menu{
display: none;
}
.navbar .menu.activate{
display: block;
}
.container{
max-width: 727.98px;
}
}
<!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>Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="navbar">
<div class="inner_navbar">
<div class="logo">
<img src="/images/Final Logo.png" style="width: 150px;">
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Desert Safari</li>
<li>Tours</li>
<li>Activities</li>
<li>Contact-Us</li>
</ul>
</div>
</div>
<div class="hamburger">
<img src="/images/menu-btn.png" style="width: 40px;">
</div>
<div class="container">
<img class="promo" src="https://www.arabian-adventures.com/on/demandware.static/-/Sites-dnata-UAE-Library/default/dw922d22bf/images/slider/luxury-desert-camping-arabian-adventures-1920x400.jpg" alt="">
</div>
</div>
</div>
<script>
var hamburger = document.querySelector(".hamburger");
var menu = document.querySelector(".menu");
hamburger.addEventListener("click", function(){
menu.classList.toggle("activate");
})
</script>
</body>
</html>
Use 100% width and set a max-width for each #media.
Important: use % in your main layout, not absolute pixels.
By using this the content will not overflow the .container
.container {
width: 100%;
max-width: 1906px;
}
#media (max-width: 992px) {
.container {
/* width 100% is set aboven*/
max-width: 991.98px;
}
}
#media (max-width: 728px) {
.container {
/* width 100% is set aboven*/
max-width: 727.98px;
}
}
I am working on a new site at the moment, and I'm wondering how I would go about making the sidebar responsive, meaning that:
it moves from the left to the top (not sticky);
the links turn into a hamburger icon;
when the hamburger icon is tapped, a full-screen menu appears (transparent colour), withthe available links centered on the screen, and an "X" to dismiss the menu in the top right;
both the hamburger icon and the logo are centered vertically in the nav, with the logo aligned to the left and the hamburger icon to the right;
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Maestoso Digital</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<nav id="nav">
<img id="logo" src="img/logo.png" alt="Maestoso Digital logo">
<ul id="nav-links">
<li id="active">Home</li>
<li>Hosting</li>
<li>Cloud Deployment</li>
<li>System Administration</li>
<li>Contact</li>
</ul>
<form action="customers.html">
<input id="customers-button" type="submit" value="Existing Customers" />
</form>
</nav>
<main>
<div id="header">
<img id="header-img" src="img/header.png" alt="Picture of data centre">
<h1 id="header-title">Welcome</h1>
</div>
<div id="content">
<h1>We are an internet service provider for the modern digital age!</h1>
<p>Maestoso Digital is an internet service provider offering bespoke, enterprise-grade hosting solutions and system administration services for all, but especially for musicians and musical organisations. Our numerous datacenters around the globe offer ultra-fast performance for whatever your needs may be, and our Network Operations Centre monitor your services 24/7 to ensure that they are always online.</p>
<footer>
<p>© Maestoso Digital. All rights reserved.</p>
</footer>
</div>
</main>
</body>
</html>
And here's my CSS:
#import url('https://fonts.googleapis.com/css2?family=Share+Tech&display=swap');
* {
box-sizing: border-box;
font-family: "Share Tech", sans-serif;
}
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #ed15ac;
}
a:hover {
font-weight: bold;
color: #ed1c51;
}
#content {
margin-top: 50px;
margin-left: 310px;
margin-right: 10px;
padding-bottom: 2.5rem;
}
p, ul, li {
font-size: 16pt;
}
#nav {
position: fixed;
display: flex;
flex-direction: column;
top: 0;
left: 0;
width: 250px;
height: 100%;
background-color: #dbdbdb;
align-items: center;
z-index: 10;
}
#media screen and (max-width: 700px) {
#nav {
width: 100%;
height: auto;
position: relative;
padding-bottom: 10px;
float: right;
}
#nav a {float: left;}
div#content {margin-left: 0; padding: 5px;}
}
#media screen and (max-width: 400px) {
#nav a {
text-align: center;
float: none;
}
}
nav img {
display: block;
margin-bottom: 35px;
padding-top: 20%;
max-width: 150px;
}
#nav-links {
list-style-type: none;
padding: 0;
margin: 0;
font-size: 16pt;
}
#nav-links:not(:last-child) {
margin-bottom: 50px;
}
p {
font-size: 16pt;
font-color: #1a1a1a;
}
h1 {
font-size: 24pt;
font-color: #000;
}
input {
background-color: #ed15ac;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
}
input:hover {
background-color: #ed1c51;
color: white;
cursor: pointer;
}
#header {
position: relative;
}
#header-title {
position: absolute;
bottom: 5px;
left: 310px;
color: white;
opacity: 60%;
font-size: 120px;
text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
}
footer {
padding-top: 20px;
bottom: 0;
width: 100%;
height: 2.5rem;
text-align: center;
}
I have tried everything that I can think of, and just can't get it to work. Any suggestions would be hugely appreciated.
Yours, Antiquis
This is a very basic example of a toggleable menu, but you need at least a little bit of javascript to toggle an .open class on your navigation container. The .open adds display: block, while by default in the mobile css it's display:none so the menu is hidden at first.
Or if you want to animate the appearance of the menu you'd be toggling the visibility and height instead for example - there are different implementations for this, I suggest inspecting other website's menu codes at a small viewport size to see how they've implemented their mobile navs for ideas.
I have not put these styles inside media queries in my example so you can clearly see it in action, and not have to resize the window.
function navToggle() {
document.getElementById('nav-links').classList.toggle("open");
}
#import url('https://fonts.googleapis.com/css2?family=Share+Tech&display=swap');
* {
box-sizing: border-box;
font-family: "Share Tech", sans-serif;
}
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #ed15ac;
}
a:hover {
font-weight: bold;
color: #ed1c51;
}
#content {
margin-top: 50px;
margin-left: 310px;
margin-right: 10px;
padding-bottom: 2.5rem;
}
p,
ul,
li {
font-size: 16pt;
}
#nav {
position: fixed;
display: flex;
flex-direction: column;
top: 0;
left: 0;
width: 250px;
height: 100%;
background-color: #dbdbdb;
align-items: center;
z-index: 10;
}
nav img {
display: block;
margin-bottom: 35px;
padding-top: 20%;
max-width: 150px;
}
#nav-links {
list-style-type: none;
padding: 0;
margin: 0;
font-size: 16pt;
}
#nav-links:not(:last-child) {
margin-bottom: 50px;
}
p {
font-size: 16pt;
font-color: #1a1a1a;
}
h1 {
font-size: 24pt;
font-color: #000;
}
input {
background-color: #ed15ac;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
}
input:hover {
background-color: #ed1c51;
color: white;
cursor: pointer;
}
#header {
position: relative;
}
#header-title {
position: absolute;
bottom: 5px;
left: 310px;
color: white;
opacity: 60%;
font-size: 120px;
text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
}
footer {
padding-top: 20px;
bottom: 0;
width: 100%;
height: 2.5rem;
text-align: center;
}
/*for purposes of demonstration, normally you stick this code in a media query, hide the hamburger toggle on desktop! */
#nav-links {
display: none;
}
#nav-links.open {
display: block;
}
#media screen and (max-width: 700px) {
#nav {
width: 100%;
height: auto;
position: relative;
padding-bottom: 10px;
float: right;
}
#nav a {
float: left;
}
div#content {
margin-left: 0;
padding: 5px;
}
}
#media screen and (max-width: 400px) {
#nav a {
text-align: center;
float: none;
}
}
<nav id="nav">
<img id="logo" src="img/logo.png" alt="Maestoso Digital logo">
<div class="hamburger-cont"><button id="hamburger-toggle" onclick="navToggle()">☰</button></div>
<ul id="nav-links">
<li id="active">Home</li>
<li>Hosting</li>
<li>Cloud Deployment</li>
<li>System Administration</li>
<li>Contact</li>
</ul>
<form action="customers.html">
<input id="customers-button" type="submit" value="Existing Customers" />
</form>
</nav>
<main>
<div id="header">
<img id="header-img" src="img/header.png" alt="Picture of data centre">
<h1 id="header-title">Welcome</h1>
</div>
<div id="content">
<h1>We are an internet service provider for the modern digital age!</h1>
<p>Maestoso Digital is an internet service provider offering bespoke, enterprise-grade hosting solutions and system administration services for all, but especially for musicians and musical organisations. Our numerous datacenters around the globe offer
ultra-fast performance for whatever your needs may be, and our Network Operations Centre monitor your services 24/7 to ensure that they are always online.</p>
<footer>
<p>© Maestoso Digital. All rights reserved.</p>
</footer>
</div>
</main>
#import url('https://fonts.googleapis.com/css2?family=Share+Tech&display=swap');
* {
box-sizing: border-box;
font-family: "Share Tech", sans-serif;
}
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #ed15ac;
}
a:hover {
font-weight: bold;
color: #ed1c51;
}
#content {
margin-top: 50px;
margin-left: 310px;
margin-right: 10px;
padding-bottom: 2.5rem;
}
p,
ul,
li {
font-size: 16pt;
}
#nav {
position: fixed;
display: flex;
flex-direction: column;
top: 0;
left: 0;
width: 250px;
height: 100%;
background-color: #dbdbdb;
align-items: center;
z-index: 10;
}
.nav-links {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.nav-links li {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.navigation a:hover,
.navigation a:focus {
color: #f1f1f1;
}
#hamburger {
display: none;
}
.navigation .closebtn {
display: none;
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-width: 700px) {
#nav {
width: 100%;
height: auto;
position: relative;
padding-bottom: 10px;
float: right;
}
#nav a {
float: left;
}
div#content {
margin-left: 0;
padding: 5px;
}
}
#media screen and (max-width: 400px) {
#hamburger {
display: block;
}
.navigation {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
}
#nav a {
text-align: center;
float: none;
}
.navigation a {
font-size: 20px
}
.navigation .closebtn {
display: block;
font-size: 40px;
top: 15px;
right: 35px;
}
li {
padding: 10px;
}
#nav-links {
text-align: center;
margin-top: 40%;
}
#header {
position: relative;
top: 167px;
left: -303px;
}
}
nav img {
display: block;
margin-bottom: 35px;
padding-top: 20%;
max-width: 150px;
}
#nav-links {
list-style-type: none;
padding: 0;
margin: 0;
font-size: 16pt;
}
#nav-links:not(:last-child) {
margin-bottom: 50px;
}
p {
font-size: 16pt;
color: #1a1a1a;
}
h1 {
font-size: 24pt;
color: #000;
}
input {
background-color: #ed15ac;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
}
input:hover {
background-color: #ed1c51;
color: white;
cursor: pointer;
}
#header {
position: relative;
}
#header-title {
position: absolute;
bottom: 5px;
left: 310px;
color: white;
opacity: 60%;
font-size: 95px;
text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
}
footer {
padding-top: 20px;
bottom: 0;
width: 100%;
height: 2.5rem;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Maestoso Digital</title>
<link rel="stylesheet" type="text/css" href="stack.css" />
</head>
<body>
<nav id="nav">
<img id="logo" src="img/logo.png" alt="Maestoso Digital logo">
<div id="myNav" class="navigation">
×
<ul id="nav-links">
<li id="active">Home</li>
<li>Hosting</li>
<li>Cloud Deployment</li>
<li>System Administration</li>
<li>Contact</li>
</ul>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()" id="hamburger">☰</span>
<form action="customers.html">
<input id="customers-button" type="submit" value="Existing Customers" />
</form>
</nav>
<main>
<div id="header">
<img id="header-img" src="img/header.png" alt="Picture of data centre">
<h1 id="header-title">Welcome</h1>
</div>
<div id="content">
<h1>We are an internet service provider for the modern digital age!</h1>
<p>Maestoso Digital is an internet service provider offering bespoke, enterprise-grade hosting solutions and system administration services for all, but especially for musicians and musical organisations. Our numerous datacenters around the globe offer
ultra-fast performance for whatever your needs may be, and our Network Operations Centre monitor your services 24/7 to ensure that they are always online.</p>
<footer>
<p>© Maestoso Digital. All rights reserved.</p>
</footer>
</div>
</main>
<script>
function openNav() {
document.getElementById("myNav").style.display = "block";
}
function closeNav() {
document.getElementById("myNav").style.display = "none";
}
</script>
</body>
</html>
Good day guys,
As you can see in the image they are stick to each other in desktop view, however on the real code I wasn't been able to do it, I tried to use the overflow but the result is not what I expected. Heres my code https://jsfiddle.net/Jury/0bqpLw1h/1/.. Thank you so much for your help
<body>
<div class="body">
<header>
<div class="menu-toggle" id="hamburger">
<i class="fas fa-bars"></i>
</div>
<div class="overlay"></div>
<nav>
<img src="img/logo2.png" alt="Logo" class="logo">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="menu">
Contact
Info
</div>
</nav>
</header>
<div class="content">
<h1 class="possible">Everything is Possible</h1>
<div class="circle">
</div>
</div>
<div class="about">
<h1>Helow</h1>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}
a {
text-decoration: none;
}
.body {
height: 100vh;
background-image: linear-gradient(
rgba(0, 31, 63, 0.958),
rgba(0, 31, 63, 0.958) )
,url(img/bgmain.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.overlay{
background-color: rgba(0,0,0,.95);
position: fixed;
right: 0;
left: 0;
top: 0;
bottom: 0;
transition: opacity 650ms;
transform: scale(0);
opacity: 0;
display: none;
}
/* Hamburger Menu */
.menu-toggle {
position: fixed;
top: 2.5rem;
right: 2.5rem;
color: #eeeeee;
font-size: 3rem;
cursor: pointer;
z-index: 1000;
display: none;
}
/* End of Hamburger Menu */
/* Navagation Link */
header {
font-family: "Raleway", sans-serif;
position: relative;
width: 100%;
height: 10rem;
z-index: 2;
}
nav {
/* padding-top: 5rem; */
display: flex;
height: 100%;
justify-content: space-between;
align-items: center;
text-transform: uppercase;
font-size: 1.4rem;
}
nav img {
height: 7rem;
margin: 0 0 0 12rem;
}
nav ul {
display: flex;
}
nav ul li {
list-style: none;
}
nav ul li a {
font-weight: 900;
font-size: 1.4rem;
padding: 1rem 0;
margin: 0 1rem;
position: relative;
color: #eee;
}
.menu {
margin: 0 12rem 0 0;
}
.menu a {
font-size: 1rem;
margin: 0 .1rem;
outline: none;
}
.menu a:last-child{
margin-right: 0;
}
nav ul li a::before,
nav ul li a::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #f4511e;
left: 0;
transform: scaleX(0);
transition: all .5s;
}
nav ul li a::before{
top: 0;
transform-origin: left;
}
nav ul li a::after{
bottom: 0;
transform-origin: right;
}
nav ul li a:hover::before,
nav ul li a:hover::after{
transform: scaleX(1);
}
.btn {
border: none;
border-radius: 30px;
background-color: #f4511e;
color: #fff;
font-size: 1rem;
font-weight: bold;
text-align: center;
padding: 9px;
width: 70px;
text-transform: uppercase;
}
.btninfo{
padding: 9px 19px;
}
/* End of Navagation Menu */
/* Content of the Website */
/* .content {
height: 100vh;
overflow: hidden;
} */
.possible {
color: #fff;
text-align: center;
letter-spacing: 10px;
text-transform: uppercase;
padding-top: 6rem;
font-family: "Coiny", sans-serif;
font-size: 3.2rem;
}
.circle {
position: absolute;
border-radius: 50%;
width: 100%;
height: 50rem;
background-color: #6CA9A5;
z-index: 1;
margin: 0;
margin-top: -75%;
}
.about {
height: 100vh;
width:100%;
background-color: crimson;
z-index: 3;
position:absolute;
/*bottom : 0;*/
}
/* Media Queries for tablet and mobile */
#media screen and (max-width: 990px) {
.menu-toggle {
display: block;
}
nav {
display: none;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
height: 100vh;
text-align: center;
}
nav ul {
flex-direction: column;
}
nav ul li {
margin-top: 5rem;
}
nav ul li a {
margin 0;
font-size: 3rem;
}
nav ul li:first-child{
margin-top: 0;
}
.overlay.menu-open,
nav.menu-open{
display: flex;
transform: scale(1);
opacity: 1;
}
nav img {
height: 15rem;
margin: 0;
}
.menu {
margin-right: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Raleway|Coiny|Roboto|Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<link rel="stylesheet" href="style.css">
<title>Jury Gregorio - Welcome</title>
</head>
<body>
<div class="body">
<header>
<div class="menu-toggle" id="hamburger">
<i class="fas fa-bars"></i>
</div>
<div class="overlay"></div>
<nav>
<img src="img/logo2.png" alt="Logo" class="logo">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="menu">
Contact
Info
</div>
</nav>
</header>
<div class="content">
<h1 class="possible">Everything is Possible</h1>
<div class="circle">
</div>
</div>
<div class="about">
<h1>Helow</h1>
</div>
</div>
<script>
var open = document.getElementById('hamburger');
var changeIcon = true;
open.addEventListener("click", function(){
var overlay = document.querySelector('.overlay');
var nav = document.querySelector('nav');
var icon = document.querySelector('.menu-toggle i');
overlay.classList.toggle("menu-open");
nav.classList.toggle("menu-open");
if (changeIcon) {
icon.classList.remove("fa-bars");
icon.classList.add("fa-times");
changeIcon = false;
}
else {
icon.classList.remove("fa-times");
icon.classList.add("fa-bars");
changeIcon = true;
}
});
</script>
</body>
</html>
Small changes in the css can make the image like look. Just make a small change in .about. and this will work. output of the below code
.about {
position: absolute;
height: 100vh;
background-color: crimson;
z-index: 3;
width: 100%;
margin-top: -270px;
}
I have made some changes along with some brief explanation to the CSS file, in particular, the .content and .circle selector. Best viewed in desktop environment.
Fiddle
Just add this style before your media query also you check it on this fiddle https://jsfiddle.net/v8r463je/
.about {
position: absolute;
height: 100vh;
background-color: crimson;
z-index: 3;
width: 100%;
margin-top: -270px;
}
.content{
background-color: #0b2947;
}
/* Media Queries for tablet and mobile */
Output here
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}
a {
text-decoration: none;
}
.body {
height: 100vh;
background-image: linear-gradient(
rgba(0, 31, 63, 0.958),
rgba(0, 31, 63, 0.958) )
,url(img/bgmain.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.overlay{
background-color: rgba(0,0,0,.95);
position: fixed;
right: 0;
left: 0;
top: 0;
bottom: 0;
transition: opacity 650ms;
transform: scale(0);
opacity: 0;
display: none;
}
/* Hamburger Menu */
.menu-toggle {
position: fixed;
top: 2.5rem;
right: 2.5rem;
color: #eeeeee;
font-size: 3rem;
cursor: pointer;
z-index: 1000;
display: none;
}
/* End of Hamburger Menu */
/* Navagation Link */
header {
font-family: "Raleway", sans-serif;
position: relative;
width: 100%;
height: 10rem;
z-index: 2;
}
nav {
/* padding-top: 5rem; */
display: flex;
height: 100%;
justify-content: space-between;
align-items: center;
text-transform: uppercase;
font-size: 1.4rem;
}
nav img {
height: 7rem;
margin: 0 0 0 12rem;
}
nav ul {
display: flex;
}
nav ul li {
list-style: none;
}
nav ul li a {
font-weight: 900;
font-size: 1.4rem;
padding: 1rem 0;
margin: 0 1rem;
position: relative;
color: #eee;
}
.menu {
margin: 0 12rem 0 0;
}
.menu a {
font-size: 1rem;
margin: 0 .1rem;
outline: none;
}
.menu a:last-child{
margin-right: 0;
}
nav ul li a::before,
nav ul li a::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #f4511e;
left: 0;
transform: scaleX(0);
transition: all .5s;
}
nav ul li a::before{
top: 0;
transform-origin: left;
}
nav ul li a::after{
bottom: 0;
transform-origin: right;
}
nav ul li a:hover::before,
nav ul li a:hover::after{
transform: scaleX(1);
}
.btn {
border: none;
border-radius: 30px;
background-color: #f4511e;
color: #fff;
font-size: 1rem;
font-weight: bold;
text-align: center;
padding: 9px;
width: 70px;
text-transform: uppercase;
}
.btninfo{
padding: 9px 19px;
}
/* End of Navagation Menu */
/* Content of the Website */
/* .content {
height: 100vh;
overflow: hidden;
} */
.possible {
color: #fff;
text-align: center;
letter-spacing: 10px;
text-transform: uppercase;
padding-top: 6rem;
font-family: "Coiny", sans-serif;
font-size: 3.2rem;
}
.circle {
position: relative;
border-radius: 50%;
width: 50rem;
height: 50rem;
background-color: #6CA9A5;
margin: 10rem auto;
z-index: 1;
}
.about {
position: absolute;
height: 100vh;
background-color: crimson;
z-index: 3;
width: 100%;
margin-top: -270px;
}
.content{
background-color: #0b2947;
}
/* Media Queries for tablet and mobile */
#media screen and (max-width: 990px) {
.menu-toggle {
display: block;
}
nav {
display: none;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
height: 100vh;
text-align: center;
}
nav ul {
flex-direction: column;
}
nav ul li {
margin-top: 5rem;
}
nav ul li a {
margin 0;
font-size: 3rem;
}
nav ul li:first-child{
margin-top: 0;
}
.overlay.menu-open,
nav.menu-open{
display: flex;
transform: scale(1);
opacity: 1;
}
nav img {
height: 15rem;
margin: 0;
}
.menu {
margin-right: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Raleway|Coiny|Roboto|Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<link rel="stylesheet" href="style.css">
<title>Jury Gregorio - Welcome</title>
</head>
<body>
<div class="body">
<header>
<div class="menu-toggle" id="hamburger">
<i class="fas fa-bars"></i>
</div>
<div class="overlay"></div>
<nav>
<img src="img/logo2.png" alt="Logo" class="logo">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="menu">
Contact
Info
</div>
</nav>
</header>
<div class="content">
<h1 class="possible">Everything is Possible</h1>
<div class="circle">
</div>
</div>
<div class="about">
<h1>Helow</h1>
</div>
</div>
<script>
var open = document.getElementById('hamburger');
var changeIcon = true;
open.addEventListener("click", function(){
var overlay = document.querySelector('.overlay');
var nav = document.querySelector('nav');
var icon = document.querySelector('.menu-toggle i');
overlay.classList.toggle("menu-open");
nav.classList.toggle("menu-open");
if (changeIcon) {
icon.classList.remove("fa-bars");
icon.classList.add("fa-times");
changeIcon = false;
}
else {
icon.classList.remove("fa-times");
icon.classList.add("fa-bars");
changeIcon = true;
}
});
</script>
</body>
</html>