Having trouble implementing the hamburger menu functionality in my HTML/CSS project. When clicked on a shrunken screen, I want the 'Home' and 'About' text in the nav to appear stacked on top of each other. JS is causing me some difficulties here as I'm unable to make the text appear upon clicking the hamburger menu. Anyone who can help with this or even try implementing the stacking feature is appreciated. I've been striving to master working with JS in this project so any assistance would be great. Thank you!
Struggling with my HTML/CSS project where I need the 'Home' and 'About' text in the navigation to stack on top of each other when the hamburger menu is clicked on a shrunken screen. Having issues with the JavaScript part, specifically making the text visible upon clicking the menu. Will attempt to handle the stacking after sorting out the JS. Any help or suggestions on implementing the menu using JS will be highly valued, as it's a crucial aspect of this project that I'm focusing on. Have a good day.
'''''''
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>Backroads || Tour Company</title>
<!-- favicon -->
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />
<!-- font-awesome -->
<link
rel="stylesheet"
href="./fontawesome-free-5.12.1-web/css/all.min.css"
/>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
<!-- styles css -->
<link rel="stylesheet" href="./css/styles.css" />
</head>
<body>
<!-- header -->
<main>
<nav class="topNav">
<ul>
<div>
<li><img src="./images/favicon.ico" alt=""></li>
</div>
<button class="hamburger" id="hamburger" onclick="showText()">
<i class="fas fa-bars"></i>
</button>
<li><a href="#home">Home</a></li>
<li><a href="#section-title">About</a></li>
</ul>
</nav>
</main>
<!-- js -->
<script src="./js/app.js"></script>
</body>
</html>
'''''''
css
'''''''
/*
===============
Fonts
===============
*/
@import url("https://fonts.googleapis.com/css?family=Lato:400,700&display=swap");
/*
===============
Variables
===============
*/
:root {
/* primary/main color */
--clr-primary-5: hsl(185, 62%, 45%);
--clr-white: #fff;
--transition: all 0.3s linear;
--spacing: 0.25rem;
--ff-primary: "Lato", sans-serif;
}
/*
===============
Global Styles
===============
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--ff-primary);
background: var(--clr-white);
color: var(--clr-grey-1);
line-height: 1.5;
font-size: 0.875rem;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
img {
width: 100%;
display: block;
}
h1,
h2,
h3,
h4 {
letter-spacing: var(--spacing);
text-transform: capitalize;
line-height: 1.25;
margin-bottom: 0.75rem;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 0.875rem;
}
p {
margin-bottom: 1.25rem;
color: var(--clr-grey-5);
}
@media screen and (min-width: 800px) {
h1 {
font-size: 4rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1rem;
}
body {
font-size: 1rem;
}
h1,
h2,
h3,
h4 {
line-height: 1;
}
}
/* global classes */
.btn {
text-transform: uppercase;
background: var(--clr-primary-5);
color: var(--clr-white);
padding: 0.375rem 0.75rem;
letter-spacing: var(--spacing);
display: inline-block;
transition: var(--transition);
font-size: 0.875rem;
border: 2px solid transparent;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.btn:hover {
color: var(--clr-primary-1);
background: var(--clr-primary-8);
}
/*
===============
Navbar
=============== */
/* background of navbar */
nav ul{
background-color: grey;
display: flex;
flex-direction: row;
padding: .5rem;
border: white solid;
justify-content: flex-end;
}
nav ul li {
padding: 0 .5rem;
}
/* icon image */
nav div{
margin-right: auto;
}
nav div li img {
width: 2rem;
}
.hamburger{
background-color: transparent;
border: 0;
cursor: pointer;
font-size: 20px;
visibility: hidden;
}
nav li a{
color: var(--clr-primary-5);
}
.hamburger:focus{
outline: none;
}
@media screen and (max-width: 992px) {
nav li a {
display: none;
}
.hamburger{
visibility: visible;
}
}