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>
Related
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>
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>
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>
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>
How can I display the hidden search form on mobile device currently blank since display for the search form is none on media query? The search container is toggled.search_mobi is the trigger button. The search container is only viewable on desktop at the moment. Is this possible with either CSS or Javascript.
var toggle = document.querySelector(".search_mobi");
var content = document.querySelector(".search_container");
toggle.addEventListener("click", function() {
content.classList.toggle("displaysb");
});
#import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
*{
margin: 0;
}
header{
position: fixed;
top: 0;
right: 5px;
left: 5px;
z-index: 1;
}
.Navbar {
background-color: #46ACC2;
display: flex;
padding: 20px;
max-width: auto;
font-family: sans-serif;
color: white;
}
.Navbar__Link {
padding-right: 10px;
}
.Navbar__Link-brand{
padding-left: 50px;
}
.Navbar__Items {
display: flex;
vertical-align: middle;
}
.Navbar__Items--right {
margin-left:auto;
}
.Navbar__Link-toggle {
display: none;
}
.search {
position: relative;
display: flex;
font-size: 18px;
margin-left: auto;
vertical-align: middle;
}
.search_mobi{
display: none;
}
.search input {
width: 220px;
height: 25px;
background: #fff;
border: 1px solid #fff;
border-radius: 50px;
box-shadow: 0 0 5px #ccc, 0 2px 2px #ebebeb inset ;
}
.search input {
text-indent: 30px;
color:black;
font-weight: bolder;
padding: 5px;
}
.search .fa-search {
position: absolute;
top: 5px;
color: orange;
left: 10px;
font-size: 15px;
}
#media only screen and (max-width: 768px) {
.search_container{
display:block;
position: static;
margin-left: 5px;
margin-right: 5px;
margin-top: 62px;
height: 0px;
width: auto;
background-color: yellow;
z-index: 2;
-webkit-transition: height 0.3s ease;
transition: height 0.3s ease;
}
.search_container.displaysb{
height: 35px;
}
.Navbar__Items,
.Navbar {
flex-direction: column;
}
.search{
display: none;
}
.search_mobi{
display: inline;
position: absolute;
vertical-align: middle;
color: orange;
background-color: #fff;
border-radius: 50%;
padding: 6px;
left: auto;
font-size: 16px;
cursor: pointer;
}
.Navbar__Items {
display:none;
}
.Navbar__Items--right {
margin-left:0;
}
.Navbar__ToggleShow {
display: flex;
padding-top: 20px;
height:200px;
z-index: 5;
}
.Navbar__Link{
padding-bottom: 20px;
align-self: center;
}
.Navbar__Link-brand{
margin: 0 auto;
padding: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="malinav.css" />
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
</head>
<body>
<header class="Navbar">
<div class="search_mobi">
<span class="fa fa-search"></span>
</div>
<div class=" Navbar__Link-brand">
Website
</div>
<div class="search ">
<input placeholder="Find products and services">
<span class="fa fa-search"></span>
</div>
<nav class="Navbar__Items Navbar__Items--right ">
<div class="Navbar__Link">
Mangoes
</div>
<div class="Navbar__Link">
Oranges
</div>
<div class="Navbar__Link">
Bananas
</div>
<div class="Navbar__Link">
Pears
</div>
<div class="Navbar__Link">
Avocado
</div>
</nav>
</header>
<div class="search_container">
<div class="search">
<input placeholder="Find products and services">
<span class="fa fa-search"></span>
</div>
</div>
<script src="malinav.JS"></script>
</body>
</html>
You need set id to search div
<div id="search" class="search">
<input placeholder="Find products and services">
<span class="fa fa-search"></span>
</div>
then toggle the hidden class
document.querySelector("#search").classList.toggle("search");
var toggle = document.querySelector(".search_mobi");
var content = document.querySelector(".search_container");
toggle.addEventListener("click", function() {
content.classList.toggle("displaysb");
document.querySelector("#search").classList.toggle("search");
});
#import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
*{
margin: 0;
}
header{
position: fixed;
top: 0;
right: 5px;
left: 5px;
z-index: 1;
}
.Navbar {
background-color: #46ACC2;
display: flex;
padding: 20px;
max-width: auto;
font-family: sans-serif;
color: white;
}
.Navbar__Link {
padding-right: 10px;
}
.Navbar__Link-brand{
padding-left: 50px;
}
.Navbar__Items {
display: flex;
vertical-align: middle;
}
.Navbar__Items--right {
margin-left:auto;
}
.Navbar__Link-toggle {
display: none;
}
.search {
position: relative;
display: flex;
font-size: 18px;
margin-left: auto;
vertical-align: middle;
}
.search_mobi{
display: none;
}
.search input {
width: 220px;
height: 25px;
background: #fff;
border: 1px solid #fff;
border-radius: 50px;
box-shadow: 0 0 5px #ccc, 0 2px 2px #ebebeb inset ;
}
.search input {
text-indent: 30px;
color:black;
font-weight: bolder;
padding: 5px;
}
.search .fa-search {
position: absolute;
top: 5px;
color: orange;
left: 10px;
font-size: 15px;
}
#media only screen and (max-width: 768px) {
.search_container{
display:block;
position: static;
margin-left: 5px;
margin-right: 5px;
margin-top: 62px;
height: 0px;
width: auto;
background-color: yellow;
z-index: 2;
-webkit-transition: height 0.3s ease;
transition: height 0.3s ease;
}
.search_container.displaysb{
height: 35px;
}
.Navbar__Items,
.Navbar {
flex-direction: column;
}
.search{
display: none;
}
.search_mobi{
display: inline;
position: absolute;
vertical-align: middle;
color: orange;
background-color: #fff;
border-radius: 50%;
padding: 6px;
left: auto;
font-size: 16px;
cursor: pointer;
}
.Navbar__Items {
display:none;
}
.Navbar__Items--right {
margin-left:0;
}
.Navbar__ToggleShow {
display: flex;
padding-top: 20px;
height:200px;
z-index: 5;
}
.Navbar__Link{
padding-bottom: 20px;
align-self: center;
}
.Navbar__Link-brand{
margin: 0 auto;
padding: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="malinav.css" />
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
</head>
<body>
<header class="Navbar">
<div class="search_mobi">
<span class="fa fa-search"></span>
</div>
<div class=" Navbar__Link-brand">
Website
</div>
<div class="search ">
<input placeholder="Find products and services">
<span class="fa fa-search"></span>
</div>
<nav class="Navbar__Items Navbar__Items--right ">
<div class="Navbar__Link">
Mangoes
</div>
<div class="Navbar__Link">
Oranges
</div>
<div class="Navbar__Link">
Bananas
</div>
<div class="Navbar__Link">
Pears
</div>
<div class="Navbar__Link">
Avocado
</div>
</nav>
</header>
<div class="search_container">
<div id="search" class="search">
<input placeholder="Find products and services">
<span class="fa fa-search"></span>
</div>
</div>
<script src="malinav.JS"></script>
</body>
</html>