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>
Related
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>
<!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 am creating a small quiz app but I have applied css but the css is not working. I don't know why. Instead of showing elements in the middle of page it is showing elements in left bottom. Please tell me what should be the changes in css or in HTML. Or if the css is right please let me know how to middle all the elements in the page.
: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;
font-weight: 700;
margin-bottom: 4rem;
}
h3{
font-size: 2.8rem;
font-weight: 500;
}
/* UTILITIES */
.container{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
max-width: 80 rem;
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:100 100 0.4rem 0 rgba(86, 185, 235, 0.5);
transform: translate(-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 http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="app.css" />
<title>Quick Quiz</title>
</head>
<body>
<div class="container"></div>
<div id="home" class="flex-center flex-column"></div>
<h1>Quick Quiz!</h1>
<a class="btn" href="/game.html">Play</a>
<a class="btn" href="/highscores.html">High Scored</a>
</body>
</html>
This is the output kindly click here to see the output.
You have an issue with the HTML
<div class="container">
<div id="home" class="flex-center flex-column">
<h1>Quick Quiz!</h1>
<a class="btn" href="/game.html">Play</a>
<a class="btn" href="/highscores.html">High Scored</a>
</div>
</div>
All you have to do is put your elements inside <div id="home" class="flex-center flex-column"></div> this div.
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>
This question already has answers here:
Text that shows an underline on hover
(6 answers)
Closed 2 years ago.
I am trying to create a navigation bar that has an effect when the user hovers over one of the sections. I have already made the navbar, but I am having trouble constructing the underline hover effect. I want it so when the user hovers, a line appears at the bottom indicating they can click it. How can I create this effect? Here is the code I am using, thanks.
*{
margin: 0;
padding: 0;
}
body{
min-height: 200vh;
background-color: blue;;
}
header{
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 40px 100px;
z-index: 100000;
font-family: serif;
}
header.sticky{
padding: 5px 100px;
background: #fff;
font-family: serif;
}
header .logo{
position: relative;
font-weight: 700;
color: #fff;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.6s;
font-family: serif;
}
header ul{
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-family: serif;
}
header ul li{
position: relative;
list-style: none;
font-family: serif;
}
header ul li a{
position: relative;
margin: 0 15px;
text-decoration: none;
color: #fff;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
font-family: serif;
}
header.sticky .logo, header.sticky ul li a{
color: #000;
font-family: serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<ul>
<li>Random</li>
<li>Random</li>
<li>Random</li>
<li>Random</li>
<li>Random</li>
</ul>
</header>
</body>
</html>
Add this to your stylesheet:
header ul li a:hover{
text-decoration: underline;
}
By the way, there's no need to define the font for every element - declare it on the body and everything will inherit it.
*{
margin: 0;
padding: 0;
}
body{
min-height: 200vh;
background-color: blue;;
}
header{
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 40px 100px;
z-index: 100000;
font-family: serif;
}
header.sticky{
padding: 5px 100px;
background: #fff;
font-family: serif;
}
header .logo{
position: relative;
font-weight: 700;
color: #fff;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.6s;
font-family: serif;
}
header ul{
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-family: serif;
}
header ul li{
position: relative;
list-style: none;
font-family: serif;
}
header ul li a{
position: relative;
margin: 0 15px;
text-decoration: none;
color: #fff;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
font-family: serif;
}
/* On Hover */
header ul li a:hover {
text-decoration: underline;
}
/* On Hover END */
header.sticky .logo, header.sticky ul li a{
color: #000;
font-family: serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<ul>
<li>Random</li>
<li>Random</li>
<li>Random</li>
<li>Random</li>
<li>Random</li>
</ul>
</header>
</body>
</html>