How can I open my Nav Bar with Javascript? - javascript

I want to see the my nav-list when I click the 3-line tab.
but nothing happened when I click it.
plz let me know how to do it. TT
here is the codes what I write.
I want to see the my nav-list when I click the 3-line tab.
but nothing happened when I click it.
plz let me know how to do it. TT
here is the codes what I write.
as the page shrinks, the 3-line tab appears.
and I use google chrome.
const burger = document.querySelector(".burger");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");
burger.addEventListener("click", () => {
navLinks.classList.toggle("open");
});
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
font-family: sans-serif;
}
nav{
height: 10vh;
background: black;
}
.nav-links{
display: flex;
list-style: none;
width: 50%;
height: 100%;
justify-content: space-around;
align-items: center;
margin-left: auto;
}
.nav-links li a{
color: white;
text-decoration: none;
font-size: 16px;
}
.landing{
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
}
.landing h1{
margin: 100px;
font-size: 50px;
color: purple;
}
#media screen and (max-width: 768px){
.line {
width: 30px;
height: 3px;
background: white;
margin: 5px;
}
nav{
position: relative;
}
.burger{
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
}
.nav-links{
position: fixed;
background: black;
height: 100vh;
width: 100%;
flex-direction: column;
clip-path: circle(100px at 90% -20%);
-webkit-clip-path: circle(100px at 90% -20%);
transition: all 1s ease-out;
}
.nav-links.open{
clip-path: circle(1000px at 90% -20%);
-webkit-clip-path: circle(1000px at 90% -20%);
}
.landing{
flex-direction: column;
}
}
<!DOCTYPE html>
<html>
<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/css2?family=Alata&display=swap" rel="stylesheet">
<title>FRIENDS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<div class="burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li>HOME</li>
<li>CHARACTER</li>
<li>STUDY</li>
<li>VISITORS</li>
</ul>
</nav>
<section class="landing">
<img src="circle.png" alt="dots">
<h1>FRIENDS<h1>
</section>
<script type="app.js"></script>
</body>
</html>

Related

Sticky navbar creating white space

I am making a personal website and I am having issues with my sticky navbar. When the site loads the navbar is intended to go on top of section #home but it generates a white space for itself and it's supposed to take the background image of section #home/be on top of it and on top of every other section on the website (SEE PICTURE)
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Setting Website Settings -->
<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>Mark6712</title>
<meta name="description" content="Mark6712's personal website.">
<meta name="keywords" content="Mark6712, Programming, C, C++, Software, Personal">
<meta name="robots" content="noindex, nofollow">
<meta name="author" content="Mark6712">
<!-- Setting the Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/assets/favicon/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<link rel="mask-icon" href="/assets/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/assets/favicon/favicon.ico">
<meta name="apple-mobile-web-app-title" content="Mark6712">
<meta name="application-name" content="Mark6712">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="/assets/favicon/mstile-144x144.png">
<meta name="msapplication-config" content="/assets/favicon/browserconfig.xml">
<meta name="theme-color" content="#44444c">
<!-- Importing CSS/JS -->
<link rel="stylesheet" href="/assets/stylesheets/navbar.css">
<link rel="stylesheet" href="/assets/stylesheets/main.css">
<script src="/assets/scripts/navbar.js" defer></script>
</head>
<body>
<nav class="navbar">
<a class="nav-logo" href="#">Mark6712</a>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="nav-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<main>
<section id="home">
<h1>Home</h1>
<p>This is the home page.</p>
</section>
<section id="about">
<h1>About</h1>
<p>This is the about page.</p>
</section>
</main>
<footer>
</footer>
</body>
</html>
navbar.css
#import url('https://fonts.googleapis.com/css?family=Heebo&display=swap');
#import url('https://fonts.googleapis.com/css?family=Proxima+Nova&display=swap');
.navbar {
z-index: 100;
font-family: 'Heebo', sans-serif;
display: flex;
position: sticky;
top: 1vh;
justify-content: space-between;
align-items: center;
border-radius: 20px;
background-color: rgba(80, 80, 80, 0.50);
backdrop-filter: saturate(180%) blur(20px);
color: white;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
margin: 0;
padding: 0;
}
.nav-logo {
position: relative;
font-family: 'Proxima Nova', 'Segoe UI', sans-serif;
font-size: 1.5rem;
font-weight: bold;
margin: .5rem;
left: .7rem;
text-decoration: none;
color: white;
}
.nav-links {
height: 100%;
z-index: 99;
}
.nav-links ul {
display: flex;
margin: 0;
padding: 0;
}
.nav-links li {
list-style: none;
}
.nav-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.nav-links li:hover {
background-color: #555;
border-radius: 20px;
}
.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: 95%;
background-color: white;
border-radius: 10px;
margin: 8%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
#media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
background-color: rgba(80, 80, 80, 0.50);
backdrop-filter: saturate(180%) blur(20px);
}
.toggle-button {
display: flex;
}
.nav-links {
display: none;
width: 100%;
}
.nav-links ul {
width: 100%;
flex-direction: column;
background-color: rgba(81, 81, 81, 0.50);
}
.nav-links ul li {
text-align: center;
}
.nav-links ul li a {
padding: .5rem 1rem;
}
.nav-links.active {
display: flex;
}
}
main.css
* {
box-sizing: border-box;
z-index: 1;
}
html, body {
scroll-behavior: smooth;
overflow-x: hidden;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
z-index: 1;
}
section {
min-height: 100vh;
z-index: 1;
}
#home {
height: 100vh;
width: 100%;
color: aliceblue;
background-image: url("../images/background.png");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
navbar.js
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('nav-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
navbarLinks.addEventListener('click', () => {
navbarLinks.classList.remove('active')
})
You can solve this by using the float property and setting the width of the navbar to 100%.
.navbar {
width: 100%; /* new line */
float: right; /* new line */
clear: both; /* new line */
z-index: 100;
font-family: 'Heebo', sans-serif;
display: flex;
position: sticky;
top: 1vh;
justify-content: space-between;
align-items: center;
border-radius: 20px;
background-color: rgba(80, 80, 80, 0.5);
backdrop-filter: saturate(180%) blur(20px);
color: white;
border-radius: 20px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
scroll-behavior: smooth;
height: 100%;
width: 100%;
z-index: 1;
position: relative;
}
section {
min-height: 100vh;
z-index: 1;
}
#home {
top: 0;
min-height: 100vh;
width: 100%;
color: rgb(22, 29, 36);
background-image: url('../images/background.png');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: antiquewhite;
}
.navbar {
z-index: 100;
font-family: 'Heebo', sans-serif;
display: flex;
position: sticky;
top: 1vh;
justify-content: space-between;
align-items: center;
border-radius: 20px;
background-color: rgba(80, 80, 80, 0.5);
backdrop-filter: saturate(180%) blur(20px);
color: white;
border-radius: 20px;
width: 100%; /* new line */
float: right; /* new line */
clear: both; /* new line */
}
.nav-logo {
position: relative;
font-family: 'Proxima Nova', 'Segoe UI', sans-serif;
font-size: 1.5rem;
font-weight: bold;
margin: 0.5rem;
left: 0.7rem;
text-decoration: none;
color: white;
}
.nav-links {
height: 100%;
z-index: 99;
}
.nav-links ul {
display: flex;
margin: 0;
padding: 0;
}
.nav-links li {
list-style: none;
}
.nav-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.nav-links li:hover {
background-color: #555;
border-radius: 20px;
}
.toggle-button {
position: absolute;
top: 0.75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 95%;
background-color: white;
border-radius: 10px;
margin: 8%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
<nav class="navbar">
<a class="nav-logo" href="#">Mark6712</a>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="nav-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<main>
<section id="home">
<h1>Home</h1>
<p>This is the home page.</p>
</section>
<section id="about">
<h1>About</h1>
<p>This is the about page.</p>
</section>
</main>

mobile version of my website burger button doesn't drop down

So I'm trying to make a navbar and make the mobile version of it following a tutorial but the burger drop down is not working .I spent hours trying to figure this out but I cant find what's wrong
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
burger.addEventListener("click", function() {
nav.classList.toggle('nav-active');
});
}
navSlide();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
.nav {
display: flex;
align-items: center;
justify-content: space-around;
font-family: 'Poppins', sans-serif;
background-color: #5d4954;
min-height: 8vh;
}
.logo {
color: rgb(196, 194, 194);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
font-weight: bold;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 50%;
padding-right: 0px;
font-weight: bold;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(196, 194, 194);
text-decoration: none;
letter-spacing: 2px;
font-weight: bold;
font-size: 14px;
}
.burger div {
background-color: rgb(196, 194, 194);
margin: 5px;
width: 25px;
height: 3px;
}
.burger {
display: none;
cursor: pointer;
}
#media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5d4954;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
/*
#media screen and(max-width:1024px){
.nav-links{
width: 60%;
}
}*/
<html lang="en">
<head>
<script src="app.js"></script>
<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>navbar</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#200&display=swap" rel="stylesheet">
</head>
<body>
<nav class="nav">
<div class="logo">
<p>my nav</p>
</div>
<ul class="nav-links">
<li class="el">Home</li>
<li class="el">About</li>
<li class="el">work</li>
<li class="el">projects</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</body>
</html>
the JavaScript looks fine cause I traced it word for word, but its the CSS I'm kind of worried about maybe there is a problem in the media queries I made. thanks in advance :)
i realized that it runs well here when you click run snippet but it doesn't in chrome using live server in vscode, what is the problem???
The opacity of your .nav-links li never changes when you change it to active you can either remove .nav-links li { opacity: 0; } or give them the opacity when the list is active as I have done below.
EDIT: I do not see a link to your JavaScript in your HTML file. If it is working on stack overflow and not in your local files make sure you have properly linked your HTML and JavaScript files together by either having the JavaScript just before the closing body tag or add in a link to your script.js before your closing body tag. <script src="script.js"></script>
/* script.js */
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
burger.addEventListener("click", function() {
nav.classList.toggle('nav-active');
});
}
navSlide();
/* style.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
.nav {
display: flex;
align-items: center;
justify-content: space-around;
font-family: 'Poppins', sans-serif;
background-color: #5d4954;
min-height: 8vh;
}
.logo {
color: rgb(196, 194, 194);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
font-weight: bold;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 50%;
padding-right: 0px;
font-weight: bold;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(196, 194, 194);
text-decoration: none;
letter-spacing: 2px;
font-weight: bold;
font-size: 14px;
}
.burger div {
background-color: rgb(196, 194, 194);
margin: 5px;
width: 25px;
height: 3px;
}
.burger {
display: none;
cursor: pointer;
}
#media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5d4954;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
/* changes opacity of li when active */
.nav-active li {
opacity: 1;
}
/*
#media screen and(max-width:1024px){
.nav-links{
width: 60%;
}
}*/
<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>navbar</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#200&display=swap" rel="stylesheet">
</head>
<body>
<nav class="nav">
<div class="logo">
<p>my nav</p>
</div>
<ul class="nav-links">
<li class="el">Home</li>
<li class="el">About</li>
<li class="el">work</li>
<li class="el">projects</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="script.js"></script>
</body>
</html>

Why doesn't my mobile site menu work? What is invalid in my code?

I'm new here and I hope someone can help me.
I started learning programming 1 week ago and I started practicing by creating a website.
All good until mobile responsive part comes along.
I can't get the mobile menu to work with JS.
I've tried many different things. I also tried jQuery too but nothing worked.
I'm feeling very dumb and I hope I can get help.
Thank you very much!
(sorry if my English is bad; I'm still learning)
const btn_mobile = document.getElementsByClassName('.hamburger');
const menu = document.getElementsByClassName('.menu');
btn_mobile.addEventListener('click', function () {
menu.classList.toggle('.active');
})
/*Base Style*/
body{font-family: 'Inter', sans-serif; font-size: 16px;}
a{
text-decoration: none;
}
h1, h2, h3, h4, h5, p{
color: white; padding-bottom: 30px;
}
.big-text{font-size: 70px; font-weight: 900;}
.med-text{font-size: 40px;}
.normal-text{font-size: 20px;}
.small-text{font-size: 14px;}
.intro-text{text-transform: uppercase; font-size: 20px; font-weight: bold;}
.button{
padding: 15px 17px;
background: rgb(85, 85, 226);
color: white;
display:inline-block;
border-radius: 4px;
text-align: center;
}
#media (max-width: 768px){
.big-text{font-size: 40px;}
}
/*HEADER*/
.header{
width: 100%;
position: absolute;
top: 0;
padding: 15px;
display: flex;
max-width: 1350px;
left: 50%;
transform: translateX(-50%);
}
.logo{
}
.hamburger{display: none; }
.menu{
width: 100%;
}
/*align-items aggiusta verticale
jusify-content aggiusta orizontale
*/
.menu li{
display: inline-block;
}
.menu li a{
padding: 10px 20px;
color: white;
display: block;
}
.cta{
display: flex;
align-items: center;
}
#media screen and (max-width: 768px){
.cta{display: none;}
.header{
background: black;
}
.hamburger{
display: block;
height: 30px;
width: 30px;
position: absolute;
top: 40px;
right: 30px;
cursor: pointer;
}
.hamburger span{
background: white;
height: 3px;
width: 100%;
display: block;
margin-bottom: 5px;
}
.menu{ display: flex;
padding-top: 30px;
top: 0;
right: 100%;
position: absolute;
background: black;
height: 100vh;
width: 100%;
align-items: center;
justify-content: center;
flex-direction: column;
}
.menu li {
display: flex;
background-color: red;
height: 40px;
width: 140px;
margin: 20px;
text-align: center;
align-items: center;
justify-content: center;
border-radius: 20px;
}
.menu.active{
right: 0%;
}
.logo{
width: 100px;
height: 100px;
}
.logo img{
width: 100%;
height: auto;
}
}
/*! Hero section */
.hero{
background: url(bg-test.jpg) no-repeat center center;
background-size: cover;
height: 100vh;
display: flex; width: 100%; align-items: center;
}
.hero__content{
width: 100%;
max-width: 1350px;
margin: 0 auto;
padding: 30px;
}
#media (max-width: 768px){
}
*,
*:before,
*:after{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<!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>Praise Amogus</title>
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" integrity="sha512-NmLkDIU1C/C88wi324HBc+S2kLhi08PN5GDeUVVVC/BVt/9Izdsc9SVeVfA1UZbY3sHUlDSyRXhCzHfr6hmPPw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#300;400;700;900&display=swap" rel="stylesheet">
<body>
<div class="header">
<div class="logo">
<img src="logo3.png" alt="">
</div>
<ul class="menu">
<li>Home</li>
<li>Contact</li>
<li>About us</li>
</ul>
<div class= "cta">
Button
</div>
</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!--hero e contenuti-->
<div class="hero">
<div class="hero__content">
<p class="intro-text">Testo Introduttivo</p>
<h1 class="big-text">Titolo</h1>
Button 2
</div>
</div>
<script>src = script.js </script>
</body>
</html>
getElementsByClassName function returns an array. You should add [0] to get the element.
Also you have mistake with adding script to your page. Here is the right variant:
<script type="text/javascript" src="path-to-javascript-file.js"></script>

Having trouble with linking javascript to HTML

const menu = document.querySelector('#mobile-menu');
const menulinks = document.querySelector('.navbar__menu');
// Display Mobile Menu
const mobilemenu = () => {
menu.classList.toggle('is-active');
menulinks.classlist.toggle('active');
};
menu.addEventListener('click', mobileMenu ) ;
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh sans', sans-serif;
scroll-behavior: smooth;
}
.navbar {
background: #131313;
height: 80px;
display:flex;
justify-content:center ;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 1000;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 11px 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%)
background-size 100%;
-webkit-background-clip: text;
background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: table;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 3rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
padding: 10px -100px;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 125px;
text-decoration: none;
height: 100%;
font-size: 1.5rem;
transition: all 0.3s ease;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 4 5rem;
width: 100%
}
.Button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
font-size: 1.5rem;
padding: 10px 20px;
height: 100%;
width: 100%;
border:none;
outline: none;
border-radius: 4px;
background: #833ab4;
background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
color: #fff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #0d628a;
transition: all 0.3s ease;
}
.Button:hover {
color: #000000;
transition: all 0.3s ease;
}
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Website</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<!-- Navbar Section -->
<nav class="navbar">
<div class="navbar__container">
Lolipop
tion
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
Home
</li>
<li class="navbar__item">
About
</li>
<li class="navbar__item">
Services
</li>
<li class="navbar__Btn">
Sign Up
</li>
</ul>
</div>
<scripts src="Modify.js"></scripts>
</nav>
</body>
</html>
I just cant know what is it that i did wrong... which is why i came here as a last resort help me pls.
AS you can already see..... i have done everything correct.... but i don't know if this this text editor bug(i'm using vs code) or its just me... help me solve these
and pls forgive me if i'm writing the wrong thing lol
well i just need the answer to this stuff pls..... THank you guys
The tag to link a script is <script> not <scripts>
Please use script instead of scripts.it won't work and I suggest you to use sublime text 3 or Notepad ++ with vs code like me. It can save you from many headaches. :)
There are a few syntax errors with code.
HTML
<scripts src=""></scripts> is not valid HTML. You must <script src=""></script>
Relocate script to bottom of HTML just before the closing <\body>. Remove from just before closing </nav>
Javascript
To create a function you can:
Expression: const mobileMenu = function() { // code goes here }
Declaration: function mobileMenu() { // code goes here }
Arrow: const mobileMenu = () => { // code goes here }. While this is valid code you can not use it as a callback within the event listener as is. Running this function as is will attempt to look for classList on the window object which doesn't exist. You would need instead use const mobileMenu = (e) => { e.currentTarget.classList.toggle('active') }
The event listener is attached to the wrong element. Listen for click event on .navbar__item not .navbar__menu. You will also need to use querySelectorAll('.navbar__item') instead of querySelector('.navbar__item') in order to select all elements.
Lastly, you'll need to cycle through each element using a forEach().
CSS
There isn't a closing bracket that closes out your media query.
Presently there are no declared styles for .active and #mobile__menu
const menu = document.querySelector("#mobile-menu");
const menulinks = document.querySelectorAll(".navbar__item");
// Display Mobile Menu
function mobileMenu() {
this.classList.toggle("active");
}
menu.addEventListener('click', mobileMenu)
menulinks.forEach((link) => link.addEventListener("click", mobileMenu));
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Kumbh sans", sans-serif;
scroll-behavior: smooth;
}
.navbar {
background: #131313;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 1000;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 11px 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%)
background-size 100%;
-webkit-background-clip: text;
background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: table;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 3rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
padding: 10px -100px;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 125px;
text-decoration: none;
height: 100%;
font-size: 1.5rem;
transition: all 0.3s ease;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 4 5rem;
width: 100%;
}
.Button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
font-size: 1.5rem;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #833ab4;
background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
color: #fff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #0d628a;
transition: all 0.3s ease;
}
.Button:hover {
color: #000000;
transition: all 0.3s ease;
}
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 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 rel="stylesheet" href="./main.css" />
<title>Static Template</title>
</head>
<body>
<!-- Navbar Section -->
<nav class="navbar">
<div class="navbar__container">
Lolipop
tion
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
Home
</li>
<li class="navbar__item">
About
</li>
<li class="navbar__item">
<a href="#services" class="navbar__links" id="services-page"
>Services</a
>
</li>
<li class="navbar__Btn">
Sign Up
</li>
</ul>
</div>
</nav>
<script src="./Modify.js"></script>
</body>
</html>

moving text and image in nav

I was wondering how I could center the picture and keep the height of the div.
I want to move "the picture" down but it did not work... it also moved my webpage name down a bit too.
Here is my current code:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
}
.wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 1px;
}
/* GO UNDER efc*/
.section{
height: 100vh;
max-width: 100vw;
display: flex;
}
.goUnder::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(2);
background-size: cover;
z-index: -1;
}
.image1::after{
background-image: url("../images/bg.jpg");
background-color: #1b1b1b;
position: center;
}
.static {
background: #D5C49A;
}/* NAVBAR */
.navbar{
position: fixed;
width: 100%;
z-index: 2;
padding: 2rem 0;
transition: all 0.3s ease;
}
.content{
padding: 0 20rem;
}
.navbar.sticky{
background: #1b1b1b;
padding: 10px 0;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.navbar .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: #fff;
font-size: 2rem;
font-weight: 600;
text-decoration: none;
}
.logo-img{
width: 5rem;
height:auto;
line-height: -1;
}
#logAndText{
display:block;
margin:auto;
}
.navbar .menu-list{
display: inline-flex;
}
.menu-list li{
list-style: none;
}
.menu-list li a{
color: #fff;
font-size: 1.2rem;
font-weight: 500;
margin-left: 2rem;
text-decoration: none;
transition: all 0.3s ease;
}
<!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">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f05f025bf3.js" crossorigin="anonymous"></script>
<title>GameXcom</title>
</head>
<body>
<div class="wrapper">
<div class="section goUnder image1 center">
<!--nav-->
<nav class="navbar">
<div class="content">
<div id="logoAndText">
<div class="logo">
<img src="../images/logo.png" class="logo-img">
GameXcom
</div>
</div>
<ul class="menu-list">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
<div class="section static">
<h1>Static</h1>
</div>
</div>
</body>
</html>
It is just for large screens right know.
I would aprecciate any help :)
You can add that code to align the image and logo text in the center of div element!
.logo {
display: flex;
justify-content: center;
align-items: center;
max-width: 80%;
}
Also, you can change the max-width about the distance of the logo image and the logo text.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
}
.wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 1px;
}
/* GO UNDER efc*/
.section{
height: 100vh;
max-width: 100vw;
display: flex;
}
.goUnder::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(2);
background-size: cover;
z-index: -1;
}
.image1::after{
background-image: url("../images/bg.jpg");
background-color: #1b1b1b;
position: center;
}
.static {
background: #D5C49A;
}/* NAVBAR */
.navbar{
position: fixed;
width: 100%;
z-index: 2;
padding: 2rem 0;
transition: all 0.3s ease;
}
.content{
padding: 0 20rem;
}
.navbar.sticky{
background: #1b1b1b;
padding: 10px 0;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.navbar .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: #fff;
font-size: 2rem;
font-weight: 600;
text-decoration: none;
}
.logo {
display: flex;
justify-content: center;
align-items: center;
max-width: 80%;
}
.logo-img{
width: 5rem;
height:auto;
line-height: -1;
}
#logAndText{
display:block;
margin:auto;
}
.navbar .menu-list{
display: inline-flex;
}
.menu-list li{
list-style: none;
}
.menu-list li a{
color: #fff;
font-size: 1.2rem;
font-weight: 500;
margin-left: 2rem;
text-decoration: none;
transition: all 0.3s ease;
}
<!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">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f05f025bf3.js" crossorigin="anonymous"></script>
<title>GameXcom</title>
</head>
<body>
<div class="wrapper">
<div class="section goUnder image1 center">
<!--nav-->
<nav class="navbar">
<div class="content">
<div id="logoAndText">
<div class="logo">
<img src="../images/logo.png" class="logo-img">
GameXcom
</div>
</div>
<ul class="menu-list">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
<div class="section static">
<h1>Static</h1>
</div>
</div>
</body>
</html>
And without flex box, you can add vertical-align:center to the div holding the logotype (both image and brand name) and give the image some top padding, as follows:
<div id="logoAndText" style="text-align: center;"></div>
<div class="logo" style="padding-top:2vh;"></div>
<!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">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f05f025bf3.js" crossorigin="anonymous"></script>
<title>GameXcom</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
}
.wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 1px;
}
/* GO UNDER efc*/
.section{
height: 100vh;
max-width: 100vw;
display: flex;
}
.goUnder::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(2);
background-size: cover;
z-index: -1;
}
.image1::after{
background-image: url("../images/bg.jpg");
background-color: #1b1b1b;
position: center;
}
.static {
background: #D5C49A;
}/* NAVBAR */
.navbar{
position: fixed;
width: 100%;
z-index: 2;
padding: 2rem 0;
transition: all 0.3s ease;
}
.content{
padding: 0 20rem;
}
.navbar.sticky{
background: #1b1b1b;
padding: 10px 0;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.navbar .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: #fff;
font-size: 2rem;
font-weight: 600;
text-decoration: none;
}
.logo-img{
width: 5rem;
height:auto;
line-height: -1;
}
#logAndText{
display:block;
margin:auto;
}
.navbar .menu-list{
display: inline-flex;
}
.menu-list li{
list-style: none;
}
.menu-list li a{
color: #fff;
font-size: 1.2rem;
font-weight: 500;
margin-left: 2rem;
text-decoration: none;
transition: all 0.3s ease;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="section goUnder image1 center">
<!--nav-->
<nav class="navbar">
<div class="content">
<div id="logoAndText" style="text-align: center;">
<div class="logo" style="padding-top:2vh;">
<img src="../images/logo.png" class="logo-img">
GameXcom
</div>
</div>
<ul class="menu-list">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
<div class="section static">
<h1>Static</h1>
</div>
</div>
</body>

Categories