How do I display the list in a navBar when you click on the hamburger menu? Specifically the 'home' and 'about' 'text
Question
Below is my html/css. Feel free to see how it looks in your ide(I use vscode). When I click on the hamburger menu in the shrunken screen I want the 'Home' and 'About' text in the nav to appear and stack on top of eachother. I'm really just struggling with the JS(making the text appear once you click on the hamburger menu), I can try to implement the stacking afterwards but if you want to give it a shot go right ahead. Anything will help, and if you can implement the menu with JS that'll be amazing, that's what I've been trying to get down through this project. good day.
Below is my html/css. Feel free to see how it looks in your ide(I use vscode). When I click on the hamburger menu in the shrunken screen I want the 'Home' and 'About' text in the nav to appear and stack on top of eachother. I'm really just struggling with the JS(making the text appear once you click on the hamburger menu), I can try to implement the stacking afterwards but if you want to give it a shot go right ahead. Anything will help, and if you can implement the menu with JS that'll be amazing, that's what I've been trying to get down through this project. good day.
Below is my html/css. Feel free to see how it looks in your ide(I use vscode). When I click on the hamburger menu in the shrunken screen I want the 'Home' and 'About' text in the nav to appear and stack on top of eachother. I'm really just struggling with the JS(making the text appear once you click on the hamburger menu), I can try to implement the stacking afterwards but if you want to give it a shot go right ahead. Anything will help, and if you can implement the menu with JS that'll be amazing, that's what I've been trying to get down through this project. 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;
}
}
1 answers
solution1
0 2022-06-30 13:52:02
You can't put div as a child element of ul tag. You have to put li tag as a child of ul tag, then you can use div or a tag and whatever you want inside the li tag. And here I have used bootstrap 5.2 cdn and also font-awesome 6.1.1 cdn. See the code below:
function myFunction() { var element = document.getElementById("myDIV"); element.classList.toggle("hide-ul"); }
.topNav { padding: 20px 40px; display: flex; height: auto; position: absolute; width: 100%; background-color: #00ffd729; } .topul { margin-bottom: 0px; justify-content: space-between; margin-left: 0px; padding-left: 0px; max-height: 0px; overflow: hidden; transition: all 800ms; } .hide-ul { display: block; margin-left: 0px; overflow: visible; max-height: 500px; transition: all 800ms; } .topul li a { text-decoration: none; color: #000; transition: all 800ms; } .hamburger { margin-left: auto; color: #000; } ul { list-style: none; padding-left: 0px; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <!-- CSS only --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <nav class="topNav"> <div class="topul" id="myDIV" > <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#section-title">About</a> </li> <li> <a href="#home">Home</a> </li> <li> <a href="#section-title">About</a> </li> </ul> </div> <a href="#" class="hamburger" id="hamburger" onclick="myFunction()"> <i class="fas fa-bars"></i> </a> </nav> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I display the list in a navBar when you click on the hamburger menu? Specifically the home and about 'text
How do I hover to change the hamburger menu colour, click the hamburger menu to transform it to x and have the contents dropdown?
How do i make hamburger menu close on link click
How to smooth my links when I click on hamburger menu?
How can I display grid menu items on click on hamburger menu button?
Sticky Navbar Disapears When I Click On Hamburger in Mobile View Only
How to make the transition smooth for the hamburger menu in responsive navbar when toggled?
How can I get this header navbar into a hamburger menu for mobile?
I'm trying to do a Hamburger Menu, but it won't show up when I click it
hamburger menu doesn't close when i click
Related Tags