I'm building a website according to a tutorial online where I use font awesome for the menu icons. Given that the CDN is present in my code along with the keycodes for the different icons, I can't see the icon on my webpage.
index.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="with-device-width, initial-scale=1.0">
<title>Home</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;300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.4/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
</head>
<body>
<section class="header">
<nav>
<img src="images/logo.png">
<div class="nav-links">
<i class="fa fa-times"></i>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<i class="fas fa-bars"></i>
</nav>
<div class="text-box">
<h1>Manipulating the world, bit by bit.</h1>
<p>Making a website is now one of the easiest thing in the world.</p>
Contact Us to know more
</div>
</section>
</body>
</html>
style.css:
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
.header{
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/banner.png);
background-position: center;
background-size: cover;
position: relative;
}
nav{
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav img{
width: 150px;
}
.nav-links{
flex: 1;
text-align: right;
}
.nav-links ul li{
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a{
color: #fff;
text-decoration: none;
font-size: 13px;
}
.nav-links ul li::after{
content: '';
width: 0%;
height: 2px;
background: #f44336;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover::after{
width: 100%;
}
.text-box{
width: 90%;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.text-box h1{
font-size: 40px;
}
.text-box p{
margin: 10px 0 40px;
font-size: 14px;
color: #fff;
}
.hero-btn{
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 34px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.hero-btn:hover{
border: 1px solid #f44336;
background: #f44336;
transition: 1s;
}
nav .fa{
display: none;
}
#media(max-width: 700px){
.text-box h1{
font-size: 20px;
}
.nav-links ul li{
display: block;
}
.nav-links{
position: absolute;
background: #f44336;
height: 100vh;
width: 200px;
top: 0;
right: 0;
text-align: left;
z-index: 2;
}
nav .fa{
display: block;
color: #fff;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
.nav-links ul{
padding: 30px;
}
}
I tried various solutions such as checking whether I was using the right keycodes for the icons in accord with the font awesome version. Can someone help? Thanks in advance
Here's an image of what it is showing right now:
Update your CDN URL to this:
https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.1/css/all.min.css
Worked for me after I changed the version.
Click here Copy the link tag and replace your CDN
Try changing to version 5, thats what I did when it wasn't working on the tutorial.
Related
I am currently trying to make a website. However, the problem that I am getting is that when I minimize the browser, Yes, it is being responsive, but the text is going over the other components on the website and I am unsure how to work around this issue as I am quite stumped at this error.
Image for more clarification:
Web error
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="https://unpkg.com/swiper#7/swiper-bundle.min.css" />
<link rel="stylesheet" href="jason.css">
</head>
<body>
<nav>
<div class="logo">Revolutionary Fitness</div>
<ul>
<div class="items">
<li>Home</li>
<li>Classes</li>
<li>Products</li>
<li>Login</li>
<li>Feedback</li>
</div>
</ul>
</nav>
<div class="background">
<div class="overlay">
<h3>Classes</h3>
<p>Insert Something Here...</p>
</div>
</div>
<div class="main">
<h1>Classes, coaches and community</h1>
<div class="main text">
<p>At Virgin Active, we do health and fitness differently. We have expertly crafted exercise experiences
that are the perfect blend of intelligent programming and feel-good movement. We've got everything from
Yoga to HIIT, so you can move your body any
way you want.
</p>
</div>
</div>
<section class="no.1" id="no.1">
<div class="section">
<img src="Yoga.jpg" alt="Yoga">
<div class="ClassText">
<h1>Yoga</h1>
<p>
Choose from Classes with dynamism,energy and athleticism, to an authentic and peaceful experience.
<br><br>
Classes include: Align,Flow and Calm SkyPark Yoga
<br><br>
Sign Up<span> to book this class</span>
</p>
</div>
</div>
</section>
<footer class="footer">
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-whatsapp"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<ul class="list">
<li>About Us</li>
<li>Contact Us</li>
<li>FAQs</li>
</ul>
<p class="copyright">
<small>©2022 Revolutionary Fitness</small>
</p>
</footer>
</body>
</html>
Css:
#import url("https://fonts.googleapis.com/css2?family=Nunito:wght#200;300;400;600&display=swap");
* {
font-family: 'Nunito', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background: #1b1b1b;
}
nav:after {
content: '';
clear: both;
display: table;
}
nav .logo {
float: left;
color: white;
font-size: 27px;
line-height: 70px;
padding-left: 60px;
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
float: right;
margin-right: 40px;
}
nav ul li {
display: inline-block;
background: #1b1b1b;
margin: 0 5px;
}
nav ul li a {
color: white;
text-decoration: none;
line-height: 70px;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover {
color: cyan;
}
nav ul ul li a:hover {
color: cyan;
box-shadow: none;
}
nav ul ul {
position: absolute;
top: 90px;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
.background {
background-color: #212529;
width: 100%;
height: 200px;
position: relative;
/* USE FLEXBOX */
display: flex;
align-items: center;
justify-content: flex-start;
/* ADD SOME PADDING FOR BETTER UI */
padding-inline: 16px; /* LEFT and Right */
}
.overlay {
height: 100%;
color: white;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: relative;
}
.overlay h3 {
margin-bottom: 20px;
color: crimson;
font-size: 20px;
}
.overlay p {
font-size: 35px;
}
.main h1 {
display: flex;
text-align: center;
justify-content: center;
margin-top: 20px;
font-size: 50px;
}
.text {
width: 50%;
height: 50px;
padding-top: 20px;
white-space: initial;
margin: 0 auto;
word-wrap: break-word;
}
body {
margin: 0;
font-family: sans-serif;
}
.section {
background-color: #F5F5F5;
display: flex;
justify-content: space-between;
padding: 40px;
width: 80%;
margin-top: 50px;
float: left;
}
.section img {
height: 250px;
}
.section h1 {
margin-left: 100px;
color: black;
}
.section p {
margin-left: 100px;
width: 55%;
height: 50px;
white-space: initial;
margin-left: 100px;
margin-top: 20px;
word-wrap: break-word;
}
.footer {
background-color: #000;
padding: 40px;
clear: both;
}
.footer .social {
text-align: center;
padding-bottom: 25px;
color: #4b4c4d;
}
.footer .social a {
display: inline-block;
height: 40px;
width: 40px;
background: #424242;
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer .social a:hover {
color: #24262b;
background-color: #ffffff;
}
.footer ul {
margin-top: 0;
padding: 0;
list-style: none;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
text-align: center;
}
.footer ul li a {
color: #fff;
text-decoration: none;
}
.footer ul li {
display: inline-block;
padding: 0 15px;
}
.footer .copyright {
margin-top: 15px;
text-align: center;
font-size: 20px;
color: #fff;
}
you can use css media query create responsive web page.
#media only screen and (min-width: 768px) {
.overlay h3 {
font-size: 16px;
}
.overlay p {
font-size: 25px;
}
}
#media only screen and (min-width: 1200px) {
.overlay h3 {
font-size: 22px;
}
.overlay p {
font-size: 40px;
}
}
Another way that is not recommended using viewport width and height
.overlay p {
font-size: 1.5vw;
}
So to make it simple i want to make a responsive nav-bar using only html and css but ive encountered a problem, i trying to use a checkbox to make a hamburger menu so when i click it it will display the nav bar below it but when i click the checked state apparently dont work
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>King Toot's Tienda de instrumentos</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://kit.fontawesome.com/f436282179.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav>
<div class="logo-container">
<img src="">
<label class="logo-txt">King Toot's</label>
</div>
<div>
<input type="checkbox" name="check">
<label for="check" class="hamburger-btn">
<i class="fas fa-bars"></i>
</label>
</div>
<ul class="nav-list">
<li>Instrumentos</li>
<li>Marcas</li>
<li>Contacto</li>
</ul>
</nav>
</header>
<section></section>
<section></section>
<footer></footer>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
#font-face{
font-family: slenco;
src: url(../slenco.otf);
}
body{
font-family: slenco, sans-serif;
}
/*Navbar*/
nav{
height: 75px;
width: 100%;
background-color: #202020;
display: flex;
justify-content: space-between;
}
.logo-container{
display: flex;
align-items: center;
width: auto;
}
.logo{
margin-left: 2px;
}
.logo-txt{
font-size: 30px;
line-height: 75px;
padding-left: 10px;
font-weight: bold;
color: white;
}
.nav-list{
position: fixed;
width: 100%;
height: 0vh;
top: 75px;
background-color: #2f2f2f;
float: right;
text-align: center;
transition: all .5s;
}
.nav-list li{
display: none;
line-height: 30px;
margin: 50px 0;
transition: all .5s;
}
.nav-list li a{
color: white;
font-size: 20px;
text-transform: uppercase;
}
.nav-list li a:hover{
color: #3f3f3f;
transition: 0.5s;
}
.hamburger-btn{
display: block;
font-size: 30px;
color: white;
float: right;
line-height: 75px;
margin-right: 45px;
cursor: pointer;
}
#check{
display: none;
}
#check:checked ~ .nav-list{
height: 100vh;
}
#check:checked ~ .nav-list li{
display: block;
}
i will be grateful if u can help me im only a student barely know any of this stuff
Your CSS is attempting to target #check (which is an ID selector) but the checkbox does not have an id of "check".
Also, the general sibling combinator only works on siblings. So #check:checked~.nav-list does not work while there is a <div> around the <input> and <label>, because #check and .nav-list are not siblings.
nav {
width: 100%;
background-color: #202020;
display: flex;
justify-content: space-between;
}
.nav-list {
list-style: none;
position: fixed;
width: 100%;
height: 0vh;
top: 75px;
background-color: #2f2f2f;
transition: all .5s;
}
.nav-list li {
display: none;
}
.hamburger-btn {
font-size: 30px;
color: white;
line-height: 75px;
}
#check {
display: none;
}
#check:checked~.nav-list {
height: 100vh;
}
#check:checked~.nav-list li {
display: block;
}
<script src="https://kit.fontawesome.com/f436282179.js" crossorigin="anonymous"></script>
<header>
<nav>
<input id="check" type="checkbox">
<label for="check" class="hamburger-btn"><i class="fas fa-bars"></i></label>
<ul class="nav-list">
<li>Instrumentos</li>
<li>Marcas</li>
<li>Contacto</li>
</ul>
</nav>
</header>
Demo
try adding !important
#check:checked ~ .nav-list{
height: 100vh !important;
}
#check:checked ~ .nav-list li{
display: block !important;
}
I'm new to css/html and I still don't know how to center the text when hovering. So I have a project on my subject to create a simple website. And so far I'm starting with the header. I'm having this one problem where I can't center the text everytime i hover my mouse to the menus. Here is the image and my code.
* {
margin: 0;
padding: 0;
border: none;
outline: none;
font-family: monospace;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
box-sizing: border-box;
}
#font-face {
font-family: 'crimson';
src: url(fonts/Crimson-Bold.ttf);
font-style: normal;
font-weight: 100%;
}
body{
margin: 0;
padding: 0;
background: white;
}
nav{
width: 100%;
height: 100px;
background: #7B241C;
overflow: auto;
}
ul{
padding: 0;
margin: 0 0 0 150px;
list-style: none;
}
li {
float: left;
}
.logo img{
position: absolute;
top: -40px;
left:-60px;
}
li a{
margin-top: 30px;
margin-left: 100px;
}
nav a{
width: 100px;
display: block;
padding: 10px 70px;
text-decoration: none;
font-family: crimson;
color: white;
text-align: center;
}
nav a:hover {
background: #CD6155;
transition: .5s;
border-radius: 10px;
font-size: 20px;
padding: 0 50;
text-align: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pinoy Putahe</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="logo"><img src="logofinal.png" width="320" height="180"></div>
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>dishes</li>
</ul>
</nav>
</header>
</body>
</html>
Help please : (
so many issues, and no need for such things, as long as u set one you dun have to set other, anyway I have just set the fix on the same code, you have to use li a or nav a, as long as they both are doing the same in your case, so I removed one of them both and you set padding-left: 70px, which I removed and added to the width of the buttons
check the snippet
* {
margin: 0;
padding: 0;
border: none;
outline: none;
font-family: monospace;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
box-sizing: border-box;
}
#font-face {
font-family: 'crimson';
src: url(fonts/Crimson-Bold.ttf);
font-style: normal;
font-weight: 100%;
}
body{
margin: 0;
padding: 0;
background: white;
}
nav{
width: 100%;
height: 100px;
background: #7B241C;
overflow: auto;
}
ul{
padding: 0;
margin: 0 0 0 150px;
list-style: none;
}
li {
float: left;
}
.logo img{
position: absolute;
top: -40px;
left:-60px;
}
li a{
margin-top: 30px;
margin-left: 100px;
}
nav a{
width: 170px;
display: block;
padding: 10px 0;
text-decoration: none;
font-family: crimson;
color: white;
text-align: center;
}
nav a:hover {
background: #CD6155;
transition: .5s;
border-radius: 10px;
font-size: 20px;
padding: 0 50;
text-align: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pinoy Putahe</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="logo"><img src="logofinal.png" width="320" height="180"></div>
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>dishes</li>
</ul>
</nav>
</header>
</body>
</html>
Navbars...ugh. My code is supposed to be displaying a navbar on two separate pages but the margin is way too much to the right on the signin page. It looks very different from the home page. For reference, I have two separate files: one for the home page with style.css, and one for the login form with signin.css. The code for the navbar is the same for each but they're displaying very different results on the two pages.
So what I'm wondering is, why is it like this and what can be done to fix it? Here's my code:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="icon" href="https://drive.google.com/uc?id=15DKhs1-y_c6C5TXfbQ1es1cJYwItjKkQ" sizes="32x32" type="image/png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
</head>
<body>
<!-- NAVBAR -->
<nav>
<input id="nav-toggle" type="checkbox">
<!-- <div class="logo">name</div> -->
<img class="logo" src="tsLogo.png">
<ul class="links">
<li>Home</li>
<li>Problem</li>
<li>Features</li>
<li>About</li>
<li>Login</li>
</ul>
<label for="nav-toggle" class="icon-burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</nav>
</body>
</html>
style.css:
html {
scroll-behavior: smooth;
}
body {
/*background-color: #00BFFF;*/
width: 100%;
}
/* NAVBAR */
nav {
position: fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
font-family: "Poppins", sans-serif;
padding: 0 5%;
height: 100px;
background-color: white;
display: flex;
}
nav .logo {
float: left;
text-decoration: none;
text-decoration-line: none;
height: 60px;
width: 180px;
margin-top: 2vh;
display: block;
margin-left: 2vw;
margin-right: auto;
margin-bottom: 3vh;
}
nav .links {
float: right;
padding: 0;
margin: 0;
width: 60%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
nav .links li {
list-style: none;
}
nav .links a {
font-family: "Poppins", sans-serif;
display: block;
padding: 1em;
font-size: 16px;
font-weight: bold;
color: #FF8718;
text-decoration: none;
}
#nav-toggle {
position: absolute;
top: -100px;
}
nav .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
}
nav .icon-burger .line {
width: 30px;
height: 5px;
background-color: #FF8718;
margin: 5px;
border-radius: 3px;
transition: all .3s ease-in-out;
}
#media screen and (max-width: 768px) {
nav .logo {
float: none;
width: auto;
justify-content: center;
}
nav .links {
float: none;
position: fixed;
z-index: 9;
left: 0;
right: 0;
top: 100px;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(0,0,0,.8);
overflow: hidden;
box-sizing: border-box;
transition: all .5s ease-in-out;
}
nav .links a {
font-size: 20px;
}
nav :checked ~ .links {
bottom: 0;
}
nav .icon-burger {
display: block;
}
nav :checked ~ .icon-burger .line:nth-child(1) {
transform: translateY(10px) rotate(225deg);
}
nav :checked ~ .icon-burger .line:nth-child(3) {
transform: translateY(-10px) rotate(-225deg);
}
nav :checked ~ .icon-burger .line:nth-child(2) {
opacity: 0;
}
}
.youtube-link {
position: fixed;
left: 20px;
bottom: 20px;
color: #000;
text-decoration: none;
font-size: 12px;
}
signin.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://kit.fontawesome.com/64d58efce2.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="signin.css" />
<title>Login & Sign up Form</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<!-- NAVBAR -->
<nav>
<input id="nav-toggle" type="checkbox">
<!-- <div class="logo">name</div> -->
<img class="logo" src="tsLogo.png">
<ul class="links">
<li>Home</li>
<li>Problem</li>
<li>Features</li>
<li>About</li>
<li>Login</li>
</ul>
<label for="nav-toggle" class="icon-burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</nav>
</body>
</html>
signin.css:
/* NAVBAR */
nav {
position: fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
font-family: "Poppins", sans-serif;
padding: 0 5%;
height: 100px;
background-color: white;
display: flex;
}
nav .logo {
float: left;
text-decoration: none;
text-decoration-line: none;
height: 60px;
width: 180px;
margin-top: 2vh;
display: block;
margin-left: 2vw;
margin-right: auto;
margin-bottom: 3vh;
}
nav .links {
float: right;
padding: 0;
margin: 0;
width: 60%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
/* why is this wierd effect happening? */
}
nav .links li {
list-style: none;
}
nav .links a {
font-family: "Poppins", sans-serif;
display: block;
padding: 1em;
font-size: 16px;
font-weight: bold;
color: #FF8718;
text-decoration: none;
}
#nav-toggle {
position: absolute;
top: -100px;
}
nav .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
}
nav .icon-burger .line {
width: 30px;
height: 5px;
background-color: #FF8718;
margin: 5px;
border-radius: 3px;
transition: all .3s ease-in-out;
}
#media screen and (max-width: 960px) {
nav .logo {
float: none;
width: auto;
justify-content: center;
}
nav .links {
float: none;
position: fixed;
z-index: 9;
left: 0;
right: 0;
top: 100px;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(0,0,0,.8);
overflow: hidden;
box-sizing: border-box;
transition: all .5s ease-in-out;
}
nav .links a {
font-size: 20px;
}
nav :checked ~ .links {
bottom: 0;
}
nav .icon-burger {
display: block;
}
nav :checked ~ .icon-burger .line:nth-child(1) {
transform: translateY(10px) rotate(225deg);
}
nav :checked ~ .icon-burger .line:nth-child(3) {
transform: translateY(-10px) rotate(-225deg);
}
nav :checked ~ .icon-burger .line:nth-child(2) {
opacity: 0;
}
}
.youtube-link {
position: fixed;
left: 20px;
bottom: 20px;
color: #000;
text-decoration: none;
font-size: 12px;
}
you're using bootstrap in index.html but you're not using it in signup.html, that's what is causing your navbar to go "whacky"
Btw, you should not be repeating the same css from one page to the other, try to do reusable code, it makes no sense to copy and paste all that navbar css from index to signup
edit: here is the sandbox I used to play around with your code sandbox, view the result with this link
Nothing I try to find online works. When I hover over the link it goes to the link and the url changes but it doesn't move the page. I'm using chrome up to date.
Here is the code:
Edit: Apparently it has something to do with the CSS because when I took the CSS out it started to work, but I don't know why
$('.scroll').localScroll();
body {
margin:0;
color: #222;
background-color: #222;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
overflow-y: scroll;
overflow-x: hidden;
}
html, body {
width: 100%;
height: 100%;
}
.container{
width: 80%;
margin: 0 auto;
}
header::after{
content: '';
display: table;
clear: both;
}
#down{
filter: brightness(0) invert(1);
width: 3%;
height: auto;
position: absolute;
top: 50; bottom:0; left: 0; right:0;
padding-bottom: 20px;
margin: auto;
}
.movetobot{
height: 200vh;
}
section h1{
color: #fff;
position: absolute;
text-align: center;
top: 110%;
width: 100%;
line-height: 0.4em;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
.center{
text-align: center;
}
header {
width: 100%;
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.logo {
color: white;
float: left;
font-family: 'Roboto', sans-serif;
}
.btext{
font-family: 'Roboto', sans-serif;
color: #f9f3f4;
position: absolute;
text-align: center;
top: 40%;
width: 100%;
line-height: 0.4em;
}
h1{
font-size: 50px;
}
.btn{
color: #fff;
font-family: 'Roboto' sans-serif;
font-weight: 300;
text-decoration: none;
border: #ccc 1px solid;
padding: 10px 15px;
border-radius: 8px;
line-height: 4em;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li{
display: inline-block;
margin-left: 85px;
padding-top: 25px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover {
color: #ecf0f1;
}
nav a::after{
margin-top:5px;
content: '';
display: block;
height: 5px;
width: 0%;
background-color: black;
position: absolute;
transition: all ease-in-out 350ms;
}
nav a:hover::after {
width: 100%;
}
.btn:hover{
color: #b19295;
border: #fff 1px solid;
}
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300" rel="stylesheet">
<link href="css/hover.css" rel="stylesheet" media="all">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="css/hover.css" rel="stylesheet" media="all">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" href="/icons8-home-24.png">
<title>Royal Services</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="first">
<div class="container">
<h2 class="logo">R O Y A L</h2>
<nav class="scroll">
<ul>
<li>Home</li>
<li>Offering</li>
<li>Contact</li>
</ul>
</nav>
</div>
<!-- <hr width="100%"> -->
<a href="#services">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/634848-200.png" alt="down" class="hvr-hang" id="down">
</a>
<div class="btext">
<h1>ROYAL SERVICES</h1>
Discord
</div>
</div>
<div id="services">
<section class="movetobot">
<h1>Services</h1>
</section>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery-localScroll/2.0.0/jquery.localScroll.min.js></script>
<script src="js.js"></script>
</html>
Set the "id" to page part tag where you want to move.
<div id="someIdName"></div>
It's because your content in <div id="first"> is either floating or position absolute that div have no high so <div id="services"> takes all of the page. When you click the link the page is already there.
What you can do is give min-height to <div id="first">.
What i would do is to structure the HTML in better way and remove all floats and absolute positions.