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>
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>
i was trying to make a simple navbar which collapses to hamburger using CSS, HTML and JavaScript. On typing out the css when the screen is turned to smaller media query fires but doesn't seem to place the bar icon properly. That's not the problem however if you remove the code that's not part of the media query. I don't know what i've done wrong so help would really be appreciated.
HTML:
<!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">
<script src="https://kit.fontawesome.com/5c0ef76cf3.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./practice.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=Nanum+Myeongjo:wght#800&family=Secular+One&display=swap"
rel="stylesheet">
<title>Navbar using JS</title>
</head>
<body>
<main>
<nav>
<div class="nav-center">
<div class="nav-header">
<h3>Coding lessons.</h3>
<button class="nav-toggle">
<i class="fas fa-bars"></i>
</button>
</div>
<ul class="content">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
<ul class="socialicons">
<li>
<a href="https://www.twitter.com">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="https://www.facebook.com">
<i class="fab fa-facebook"></i>
</a>
</li>
<li>
<a href="https://www.twitch.com">
<i class="fab fa-twitch"></i>
</a>
</li>
<li>
<a href="https://www.facebook.com">
<i class="fab fa-facebook-messenger"></i>
</a>
</li>
</ul>
</div>
</nav>
<script src="./app.js"></script>
</main>
</body>
</html>
CSS code:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: "Nanum Myeongjo", serif;
font-family: "Secular One", sans-serif;
letter-spacing: 0.2rem;
}
.nav-center {
display: flex;
justify-content: space-between;
align-items: center;
background-color: cornflowerblue;
font-size: 1.1rem;
box-shadow: -1px 9px 13px gray;
}
.nav-toggle {
display: none;
}
.content {
height: auto;
display: flex;
list-style: none;
}
.content li a {
text-decoration: none;
cursor: pointer;
margin: 0 0.8rem;
padding: 0.6rem 0.8rem;
transition: 0.5s all linear;
}
.content li a:hover {
background-color: rgba(172, 255, 47, 0.52);
border-radius: 0.7rem;
}
.socialicons {
display: flex;
padding: 1.1rem 1.9rem;
list-style: none;
}
.socialicons a {
margin: 0 0.4rem;
font-size: 1.4rem;
transition: 0.5s all linear;
}
.socialicons a:hover {
color: lightblue;
}
#media screen and (max-width: 1000px) {
.nav-header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: cornflowerblue;
padding: 1.1rem;
}
.nav-toggle {
display: contents;
background: transparent;
border: transparent;
font-size: 1.5rem;
transition: 0.5s all linear;
color: blueviolet;
cursor: pointer;
}
.nav-toggle:hover {
transform: translate(90deg);
color: rgba(137, 43, 226, 0.582);
}
.content a {
display: block;
list-style: none;
text-decoration: none;
margin: 0.8rem 0;
font-size: 1.2rem;
text-transform: capitalize;
transition: 0.5s all linear;
}
.content a:hover {
background-color: darkolivegreen;
padding-left: 1.6rem;
}
.content {
height: 0;
overflow: hidden;
transition: 0.5s all linear;
}
.show-content {
height: 10rem;
}
.socialicons {
display: none;
}
}
JavaScript:
const navToggle = document.querySelector('.nav-toggle');
const links = document.querySelector('.content');
navToggle.addEventListener('click', function(){
links.classList.toggle('show-content');
});
It's because you apply upper div .nav-conter to flex property and didn't initiate it inside the media query. Add the css like below. It will work as you intended.
#media screen and (max-width: 1000px) {
.nav-center {
display: block;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header{
position: relative;
width: 100%;
height: 80px;
background-color: rgb(153, 153, 153);
display: flex;
justify-content: space-between;
align-items: center;
}
header a img{
width: 100px;
padding-top: 20px;
}
header #menu-bar {
list-style-type: none;
}
header ul li{
display: flex;
list-style: none;
}
header ul li a{
text-decoration: none;
padding: 0 10px;
color: white;
font-size: 18px;
text-transform: uppercase;
letter-spacing:1.4px;
}
.nav-bar{
border: 2px solid white;
text-align: center;
margin-right: 10px;
display:none;
}
.fa-bars{
color: white;
font-size: 18px;
padding: 5px;
}
.active{
display: block;
background:red
}
#media only screen and (max-width:600px){
header ul {
display:none;
margin-top: 200px;
width: 100vw;
text-align: center;
background:skyblue;
}
.nav-bar{
display:block;
}
header ul li{
flex-direction: column;
}
header ul li a{
color: black;
padding-top: 10px;
}
.navbar {
display: none;
}
}
</head>
<body>
<!-- Adding Navbar -->
<header>
<a href="#logo" class="logo">
<img src="./img/Logo.png" alt="logo">
</a>
<ul id="menu-bar">
<li>
Home
About
Services
Contact
</li>
</ul>
<i class=" fas fa fa-bars"></i>
</header>
<script>
let mainNav = document.getElementById('menu-bar');
let navBarToggle = document.getElementById('navBtn');
<!--I am facing a problem in this line-->
navBarToggle.addEventListener('click', function (){
mainNav.classList.add('active');
});
</body>
</html>
Please view the snippet. Everything seems to be running as it should be. Your navbar turns into hamburger-menu just as instructed to do so in your media-queries set at a max-width: 600px
For snippet viewing purposes I changed your media max-width to 1000px
let mainNav = document.getElementById('menu-bar');
let navBarToggle = document.getElementById('navBtn');
// I am facing a problem in this line
navBarToggle.addEventListener('click', function (){
mainNav.classList.add('active');
});
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header{
position: relative;
width: 100%;
height: 80px;
background-color: rgb(153, 153, 153);
display: flex;
justify-content: space-between;
align-items: center;
}
header a img{
width: 100px;
padding-top: 20px;
}
header #menu-bar {
list-style-type: none;
}
header ul li{
display: flex;
list-style: none;
}
header ul li a{
text-decoration: none;
padding: 0 10px;
color: white;
font-size: 18px;
text-transform: uppercase;
letter-spacing:1.4px;
}
.nav-bar{
border: 2px solid white;
text-align: center;
margin-right: 10px;
display:none;
}
.fa-bars{
color: white;
font-size: 18px;
padding: 5px;
}
.active{
display: block;
background:red
}
#media only screen and (max-width:1000px){
header ul {
display:none;
margin-top: 200px;
width: 100vw;
text-align: center;
background:skyblue;
}
.nav-bar{
display:block;
}
header ul li{
flex-direction: column;
}
header ul li a{
color: black;
padding-top: 10px;
}
.navbar {
display: none;
}
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
</head>
<body>
<!-- Adding Navbar -->
<header>
<a href="#logo" class="logo">
<img src="./img/Logo.png" alt="logo">
</a>
<ul id="menu-bar">
<li>
Home
About
Services
Contact
</li>
</ul>
<i class=" fas fa fa-bars"></i>
</header>
</body>
</html>
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>
I am practicing JavaScript and CSS by following a YouTube tutorial.
Here is a link to the GitHub repo, where the script is found.
I typed the entire code by hand, so that I could get more familiar with it. And when opening index.html in my browser, the content is displayed at the very bottom and very right, rather than being centered as it should. I thought maybe I had a typo, so I copied and pasted the entire code from GitHub and refreshed it, still no change. What could I be doing wrong?
Could the issue lie in index, rather than the script?
Here is my code:
:root {
background-color: #ecf5ff;
font-size: 62.5%;
}
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
}
h1,
h2,
h3,
h4 {
margin-bottom: 1rem;
}
h1 {
font-size: 5.4rem;
color: #56a5eb;
margin-bottom: 5rem;
}
h1 > span {
font-size: 2.4rem;
font-weight: 500;
}
h2 {
font-size: 4.2rem;
margin-bottom: 4rem;
font-weight: 700;
}
h3 {
font-size: 2.8rem;
font-weight: 500;
}
/* UTILITIES */
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
max-width: 80rem;
margin: 0 auto;
}
.container > * {
width: 100%;
}
.flex-column {
display: flex;
flex-direction: column;
}
.flex-center {
justify-content: center;
align-items: center;
}
.justify-center {
justify-content: center;
}
.text-center {
text-align: center;
}
.hidden {
display: none;
}
/* BUTTONS */
.btn {
font-size: 1.8rem;
padding: 1rem 0;
width: 20rem;
text-align: center;
border: 0.1rem solid #56a5eb;
margin-bottom: 1rem;
text-decoration: none;
color: #56a5eb;
background-color: white;
}
.btn:hover {
cursor: pointer;
box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
transform: translateY(-0.1rem);
transition: transform 150ms;
}
.btn[disabled]:hover {
cursor: not-allowed;
box-shadow: none;
transform: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="widh=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Quick Quiz</title>
<link rel="stylesheet" href="app.css" />
</head>
<body>
<div class="container"></div>
<div id="home" class="flex-center flex-column"></div>
<h1>Oberlingual</h1>
<a class="btn" href="/game.html">Play</a>
<a class="btn" href="/highscores.html">High scores</a>
</body>
</html>
Html code has 2 mistakes.
2 div elements don't have any child elements because you closed each element at the wrong position.
This code will work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="widh=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Quick Quiz</title>
<link rel="stylesheet" href="app.css" />
</head>
<body>
<div class="container">
<div id="home" class="flex-center flex-column">
<h1>Oberlingual</h1>
<a class="btn" href="/game.html">Play</a>
<a class="btn" href="/highscores.html">High scores</a>
</div>
</div>
</body>
</html>
You got confused with </div> closing tags. Here's your mistake:
<div class="container"></div>
<div id="home" class="flex-center flex-column"></div>
...
This way, you are not wrapping internal content in parent containers - div tags.
You need to close the div in sequence.
This is how you need to do it, and your code will work:
<div class="container">
<div id="home" class="flex-center flex-column">
<h1>Oberlingual</h1>
<a class="btn" href="/game.html">Play</a>
<a class="btn" href="/highscores.html">High scores</a>
</div>
</div>
Run this snippet to check here:
:root {
background-color: #ecf5ff;
font-size: 62.5%;
}
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
}
h1,
h2,
h3,
h4 {
margin-bottom: 1rem;
}
h1 {
font-size: 5.4rem;
color: #56a5eb;
margin-bottom: 5rem;
}
h1 > span {
font-size: 2.4rem;
font-weight: 500;
}
h2 {
font-size: 4.2rem;
margin-bottom: 4rem;
font-weight: 700;
}
h3 {
font-size: 2.8rem;
font-weight: 500;
}
/* UTILITIES */
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
max-width: 80rem;
margin: 0 auto;
}
.container > * {
width: 100%;
}
.flex-column {
display: flex;
flex-direction: column;
}
.flex-center {
justify-content: center;
align-items: center;
}
.justify-center {
justify-content: center;
}
.text-center {
text-align: center;
}
.hidden {
display: none;
}
/* BUTTONS */
.btn {
font-size: 1.8rem;
padding: 1rem 0;
width: 20rem;
text-align: center;
border: 0.1rem solid #56a5eb;
margin-bottom: 1rem;
text-decoration: none;
color: #56a5eb;
background-color: white;
}
.btn:hover {
cursor: pointer;
box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
transform: translateY(-0.1rem);
transition: transform 150ms;
}
.btn[disabled]:hover {
cursor: not-allowed;
box-shadow: none;
transform: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="widh=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Quick Quiz</title>
<link rel="stylesheet" href="app.css" />
</head>
<body>
<div class="container">
<div id="home" class="flex-center flex-column">
<h1>Oberlingual</h1>
<a class="btn" href="/game.html">Play</a>
<a class="btn" href="/highscores.html">High scores</a>
</div>
</div>
</body>
</html>