I am trying to use a label to toggle a checkmark. When you press the label the checkmark is checked but when you press another part of the page the checkmark is also checked which isn't my intention.
I don't really get why this is the case. Can you explain it and explain how to fix it?
header {
height: 100vh;
background-size: cover;
background-position: center;
margin-bottom: 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
text-transform: uppercase;
color: black;
}
h1 {
font-size: 50px;
letter-spacing: 8px;
}
ul {
list-style-type: none;
margin-left: 0px;
padding-left: 0px;
}
p {
width: 600px;
margin: 0 auto 20px;
}
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px
}
.container {
margin: auto;
width: 80%;
}
.page-content {
position: relative;
z-index: 0;
transition-duration: 0.4s;
}
.sidebar {
position: fixed;
top: 0px;
left: -180px;
right: 0;
bottom: 0px;
width: 120px;
padding: 30px;
background-color: black;
z-index: 0;
width: 120px;
transition-duration: 0.4s;
}
.sidebar a {
text-decoration: none;
opacity: 0.8;
font-family: monospace;
font-size: 25px;
}
.sidebar li {
margin-bottom: 15px;
}
.sidebar a:hover {
opacity: 1;
}
.toggle {
position: fixed;
top: 20px;
right: 0;
bottom: 0;
left: 20px;
z-index: 1;
color: black;
transition-duration: 0.4s;
}
#sidebartoggler:checked + .page-wrap .sidebar {
left: 0px;
}
#sidebartoggler:checked + .page-wrap .toggle {
left: 200px;
}
#sidebartoggler:checked + .page-wrap .page-content {
padding-left: 180px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="A page about me">
<meta name="keywords" content="web developer, projects">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello</title>
<!-- own style sheet -->
<link rel="stylesheet" href="/static/css/style.css">
<!-- favicon -->
<link rel='icon' href="/static/assets/favicon.ico">
<!-- google icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- the icon font -->
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
</head>
<body>
<input type="checkbox" id="sidebartoggler" name="" value="">
<div class="page-wrap">
<label for="sidebartoggler"><i class="material-icons md-36 toggle">menu</i>
</label>
<div class="page-content">
<header>
<h1>title</h1>
</header>
</div>
<div class="sidebar">
<ul>
<li>home
</li>
<li>shoutbox
</li>
<li>resume
</li>
<li>projects
</li>
</ul>
</div>
</div>
</body>
</html>
Remove .toggle { right: 0; bottom: 0; }
Related
I don't have an idea of how am I supposed to make the menu show with an animation. I want it to slide in down and back up on toggle. I'm down for any kind of solution.
const toggleButton = document.getElementById('toggleButton');
const naviList = document.getElementById('navi-lista');
toggleButton.addEventListener('click', () => {
naviList.classList.toggle('active');
})
* {
font-family: 'Lato', sans-serif;
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body {
background-color: #856547;
}
.rodzicnav {
position: fixed;
top: 0;
left: 0;
margin: auto;
width: 100%;
}
.navbar {
background-color: rgb(31, 31, 31);
align-items: center;
color: white;
display: flex;
justify-content: space-around;
font-size: 18px;
}
.primary-icon {
height: 30px;
}
.lista-nav {
list-style-type: none;
}
.lista-nav .elementlisty {
display: inline-block;
padding: 20px;
}
.navbar a {
color: white;
text-decoration: none;
}
.grow {
transition: all .2s ease-in-out;
}
.grow:hover {
transform: scale(1.1);
}
.menu {
display: none;
}
.menu-line {
width: 25px;
height: 3px;
background-color: white;
margin-bottom: 4px;
}
#media all and (min-width: 480px) {
.navbar {
flex-direction: column;
}
.menu {
display: block;
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
}
.lista-nav .elementlisty {
display: block;
padding: 10px;
border-top: solid 1px white;
}
.lista-nav {
list-style-type: none;
width: 100%;
text-align: center;
padding-top: 15px;
display: none;
}
.logo-kontener {
width: 100%;
}
.primary-icon {
margin-left: 10px;
margin-top: 10px;
}
.active {
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">
<!-- FONT -->
<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=Lato:wght#300&display=swap" rel="stylesheet">
<!-- -->
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js" defer></script>
<script src="script.js" defer></script>
</head>
<body>
<div class="rodzicnav">
<nav class="navbar">
<div class="logo-kontener">
<img class="primary-icon" src="obrazy/logo.png" alt="">
</div>
<ul class="lista-nav" id="navi-lista">
<li class="elementlisty grow">
O nas
</li>
<li class="elementlisty grow">
Realizacje
</li>
<li class="elementlisty grow">
Kontakt
</li>
</ul>
<div class="menu" id="toggleButton">
<div class="menu-line"></div>
<div class="menu-line"></div>
<div class="menu-line"></div>
</div>
</nav>
</div>
</body>
</html>
I tried watching youtube tutorials, look for some anwser at freecodecamp and w3s.
I'm also kind of new to responsive website designs, so I appreciate your help.
You can try to use max-height as property to animate:
#media all and (max-width: 480px) {
.navbar {
position: relative;
padding: 10px 15px;
}
.menu {
display: block;
cursor: pointer;
}
.lista-nav .elementlisty {
display: block;
padding: 10px;
border-top: solid 1px white;
}
.lista-nav {
transition: max-height .3s;
list-style-type: none;
width: 100%;
text-align: center;
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: rgb(31, 31, 31);
max-height: 0;
overflow: hidden;
}
.logo-kontener {
width: 100%;
}
.primary-icon {
margin-left: 10px;
margin-top: 10px;
}
.active {
max-height: 500px;
}
}
By using nth-child(1) & nav .start-home,a:nth-child(1):hover~.animation I should define the properties of home link and it's animation like it's width and position. But to adjust the width and position of the animation of the home link I have to make adjustments in nnth-child(2). And same goes for about link I need to do adjustments in nth-child(3).
In the end I can make the animation work for the last sign-in link. Also the animation is not running properly, it's breaking in the middle. Run the code and you will get better understanding of my problem.
body{
box-sizing: border-box;
font-family: sans-serif;
background-color: rgb(255, 238, 238);
}
nav{
position: relative;
margin: 0;
padding: 0;
box-shadow: 0 2px 3px 0;
width: 100%;
height: 50px;
background-color: #04111ffa;
line-height: 50px;
font-size: 15px;
padding: 0px 20px;
}
nav a{
width: 100%;
font-size: 15px;
color: seashell;
position: relative;
text-decoration: none;
text-transform: uppercase;
line-height: 50px;
z-index: 5;
text-align: center;
}
nav .animation{
position: absolute;
height: 50px;
top: 0;
z-index: 0;
width: 100px;
background-color: rgb(58, 233, 218);
border-radius: 10%;
transition: all 0.5s ease 0s;
}
a:nth-child(1){
width: 150px;
left: 0;
}
nav .start-home,a:nth-child(1):hover~.animation {
width: 80px;
left: 70px;
}
a:nth-child(2){
left: 50px;
width: 150px;
}
nav .start-about,a:nth-child(2):hover~.animation {
width: 80px;
left: 70px;
}
a:nth-child(3){
left: 70px;
width: 120px;
}
nav .start-contact,a:nth-child(3):hover~.animation {
width: 80px;
left: 140px;
}
a:nth-child(4){
left: 90px;
width: 170px;
}
nav .start-privacy-policy,a:nth-child(4):hover~.animation {
width: 90px;
left: 225px;
}
a:nth-child(5){
left: 110px;
width: 200px;
}
nav .start-docs,a:nth-child(5):hover~.animation {
width: 145px;
left: 315px;
}
a:nth-child(6){
left: 130px;
width: 100px;
}
.search-container{
float: right;
}
input[type=text]{
padding: 6px;
margin-top: 13px;
font-size: 17px;
border: none;
border-radius: 15px;
}
.search-container button{
float: right;
padding: 6px 10px;
margin-top: 13px;
margin-right: 30px;
font-size: 17px;
border-radius: 15px;
background-color: rgb(58, 233, 218);
}
.search-container button:hover{
background-color: rgb(35, 168, 157);
}
.icon{
color: white;
z-index: 5;
}
.search-container{
float: right;
}
.links{
display: inline-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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link rel="stylesheet" href="navbar.css">
<title>Document</title>
</head>
<body>
<header>
<nav>
<div class="links">
<span class="icon fas fa-bars"></span>
Home
About
Contact
Privacy Policy
Sign-in
<div class="animation start-home"></div>
</div>
<div class="search-container">
<form>
<input type="text" placeholder="Search..." name="search" class="searchbar">
<button type="submit"><i class="fas fa-search"></i><span class="text">Search</span></button>
</form>
</div>
</nav>
</header>
</body>
</html>
If I understood you correctly, then perhaps this example can help you:
const animationElement = document.querySelector('.links .animation');
const defaultElement = document.querySelector('.links a'); // set default element !
const slideToElement = (el) => {
if (el) {
animationElement.style.left = el.offsetLeft + 'px';
animationElement.style.width = el.offsetWidth + 'px';
} else {
animationElement.style.removeProperty('left');
animationElement.style.removeProperty('width');
}
}
// tracking all hovers on "a" links
document.querySelector('.links').addEventListener('mouseover', (ev) => ev.target.matches('a') && slideToElement(ev.target))
// tracking leaving the links area
document.querySelector('.links').addEventListener('mouseleave', () => slideToElement(defaultElement))
slideToElement(defaultElement); // setting the slide to the default position
body {
box-sizing: border-box;
font-family: sans-serif;
background-color: rgb(255, 238, 238);
}
nav {
position: relative;
margin: 0;
padding: 0;
box-shadow: 0 2px 3px 0;
width: 100%;
height: 50px;
background-color: #04111ffa;
line-height: 50px;
font-size: 15px;
padding: 0px 20px;
}
nav a {
width: 100%;
font-size: 15px;
color: seashell;
position: relative;
text-decoration: none;
text-transform: uppercase;
line-height: 50px;
z-index: 5;
text-align: center;
margin-left: 30px;
padding: 0 10px;
}
nav .animation {
position: absolute;
height: 50px;
top: 0;
z-index: 0;
width: 100px;
background-color: rgb(58, 233, 218);
border-radius: 10%;
transition: all 0.5s ease 0s;
}
a:nth-child(1) {
width: 150px;
left: 0;
}
input[type=text] {
padding: 6px;
margin-top: 13px;
font-size: 17px;
border: none;
border-radius: 15px;
}
.search-container button {
float: right;
padding: 6px 10px;
margin-top: 13px;
margin-right: 30px;
font-size: 17px;
border-radius: 15px;
background-color: rgb(58, 233, 218);
}
.search-container button:hover {
background-color: rgb(35, 168, 157);
}
.icon {
color: white;
z-index: 5;
}
.search-container {
float: right;
}
.links {
display: inline-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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link rel="stylesheet" href="navbar.css">
<title>Document</title>
</head>
<body>
<header>
<nav>
<div class="links">
<span class="icon fas fa-bars"></span>
Home
About
Contact
Privacy Policy
Sign-in
<div class="animation start-home"></div>
</div>
<div class="search-container">
<form>
<input type="text" placeholder="Search..." name="search" class="searchbar">
<button type="submit"><i class="fas fa-search"></i><span class="text">Search</span></button>
</form>
</div>
</nav>
</header>
</body>
</html>
This solution is made in JS, which made it possible to remove excess from CSS and not depend on pre-set CSS values.
I hope this can help somehow.
I want to hide the href link attachment to my browser link when I click on each href. For example, when I click on the href="dummy1" I don't want it to show mydomain.com/#dummy1. I want to hide the #dummy1 part. Hope this question makes sense.
Each hypertext scrolls down to a different part of my page.
Here is my CSS and HTML code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #000;
min-height: 200vh;
}
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;
}
header .logo {
position: relative;
font-weight: 700;
color: #fff;
text-decoration: none;
font-size: 3em;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.6s;
}
header.sticky {
padding: 5px 100px;
background: #fff;
}
header ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
margin: 0 15px;
text-decoration: none;
color: #fff;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
}
.banner {
position: relative;
width: 100%;
height: 100vh;
background: url(IMG-1022.jpg);
background-size: cover;
}
header.sticky .logo,
header.sticky ul li a {
color: #000;
}
#home {
padding-bottom: 500px;
background-color: aqua;
}
#aboutMe {
padding-bottom: 500px;
background-color: orange;
}
#portfolio {
padding-bottom: 500px;
background-color: yellow;
}
#contact {
padding-bottom: 1000px;
background-color: purple;
}
#wrapper {
padding-bottom: 50px;
}
#dummy1,
#dummy2,
#dummy3 {
margin-top: -65px;
}
#aboutMe,
#portfolio,
#contact {
margin-top: 65px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=chrome">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="indexStyle.css">
<link rel="shortcut icon" type="image/jpg" href="favicon.img"/>
<title>Document</title>
</head>
<body>
<header>
My Name
<ul>
<li class="page-scroll">About Me</li>
<li class="page-scroll">Portfolio</li>
<li class="page-scroll">Contact</li>
</ul>
</header>
<section class="banner"></section>
<script type="text/javascript">
window.addEventListener("scroll", function(){
var header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 100);
})
</script>
<div id="dummy1"></div>
<div id="aboutMe">This is the about me section</div>
<div id="dummy2"></div>
<div id="portfolio">This is the portfolio section</div>
<div id="dummy3"></div>
<div id="contact">This is the contact me section</div>
</body>
</html>
This can be achived by setting the href property to href="" and by attaching a onClick event to the <a> tag to redirect the link after clicking.
In the end, it should look like this:
Your text.
For this case you can use JavaScript. Bind your link to a clickevent and set the link target via JS and jump there. This way you can manipulate the link as you like.
function jump (target) {
window.location = '#' + target;
return false;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #000;
min-height: 200vh;
}
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;
}
header .logo {
position: relative;
font-weight: 700;
color: #fff;
text-decoration: none;
font-size: 3em;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.6s;
}
header.sticky {
padding: 5px 100px;
background: #fff;
}
header ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
margin: 0 15px;
text-decoration: none;
color: #fff;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
}
.banner {
position: relative;
width: 100%;
height: 100vh;
background: url(IMG-1022.jpg);
background-size: cover;
}
header.sticky .logo,
header.sticky ul li a {
color: #000;
}
#home {
padding-bottom: 500px;
background-color: aqua;
}
#aboutMe {
padding-bottom: 500px;
background-color: orange;
}
#portfolio {
padding-bottom: 500px;
background-color: yellow;
}
#contact {
padding-bottom: 1000px;
background-color: purple;
}
#wrapper {
padding-bottom: 50px;
}
#dummy1,
#dummy2,
#dummy3 {
margin-top: -65px;
}
#aboutMe,
#portfolio,
#contact {
margin-top: 65px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=chrome">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="indexStyle.css">
<link rel="shortcut icon" type="image/jpg" href="favicon.img"/>
<title>Document</title>
</head>
<body>
<header>
My Name
<ul>
<li class="page-scroll"><a onclick="return jump( 'dummy1')" href="dummy1">About Me</a></li>
<li class="page-scroll"><a onclick="return jump( 'dummy2')" href="dummy2">Portfolio</a></li>
<li class="page-scroll"><a onclick="return jump( 'dummy1')" href="dummy3">Contact</a></li>
</ul>
</header>
<section class="banner"></section>
<script type="text/javascript">
window.addEventListener("scroll", function(){
var header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 100);
})
</script>
<div id="dummy1"></div>
<div id="aboutMe">This is the about me section</div>
<div id="dummy2"></div>
<div id="portfolio">This is the portfolio section</div>
<div id="dummy3"></div>
<div id="contact">This is the contact me section</div>
</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
Questions(A is wrote by myself, and B is from online course):
A can achieve the same effect which is more simplle than B, which should I choose when in real project?
I tried to delete the a11y and found that there's no influence on results, so what's a11y in B for?
how can .button li a:after,.button li a:after in B form a border? why don't do that like me just add a box-shadow to li or a?
A(css&html)
body {
padding: 50px;
}
.button li {
float: left;
}
.button li a {
display: inline-block;
position: relative;
width: 107px;
height: 35px;
z-index: 1;
overflow: hidden;
border-radius: 50px;
text-align: center;
line-height: 35px;
color: #1e1e1e;
box-shadow: inset 0px 0px 0px 2px #d3d2d2;
}
.button li .button-inner {
position: relative;
z-index: 3;
}
.mask {
display: block;
position: absolute;
bottom: 0;
width: 107px;
height: 0;
z-index: 1;
/* border-radius: 50px; */
background-color: #d6d6d6;
opacity: 0;
transition: all 0.2s ease-in;
}
.button li a:hover .mask {
opacity: 1;
height: 35px;
}
<!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="css/base.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="button">
<ul>
<li>
<a href="#">
<span class="button-inner">
探索
</span>
<span class="mask"></span>
</a>
</li>
</ul>
</div>
</body>
</html>
B(css&html)
body {
padding: 50px;
}
.button ul li {
float: left;
}
.button li a {
display: inline-block;
position: relative;
line-height: 30px;
text-align: center;
color: #1e1e1e;
/* 文字间距 */
letter-spacing: 0.5px;
border-radius: 50px;
overflow: hidden;
z-index: 1;
cursor: pointer;
vertical-align: middle;
box-sizing: border-box;
}
.button-inner {
position: relative;
z-index: 3;
display: block;
border-radius: 22px;
padding: 5px 37px 0 37px;
margin-right: 0px;
box-sizing: border-box;
}
.a11y {
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
display: block;
margin: 0;
padding: 0;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background-color: #d6d6d6;
padding-top: 0px;
line-height: 46px;
color: #fff;
display: block;
transition: transform 0.2s ease-in;
transform: translate(0%, 105%) translate3d(0px, 0px, 0px);
}
.button li a:after,
.button li a:after {
content: "";
display: block;
position: absolute;
z-index: 1;
top: 1px;
left: 1px;
bottom: 1.1px;
right: 1px;
box-shadow: inset 0px 0px 0px 2px #d3d2d2;
border-radius: 50px;
}
.button li a:hover .mask {
transform: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="button">
<ul>
<li>
<a href="#">
<span class="button-inner">
探索
<span class="a11y"></span>
</span>
<span class="mask"></span>
</a>
</li>
</ul>
</div>
</body>
</html>
When you give z-index to an element, it gets that index relative to the scope. So in the second block of code from online source, they gave scope of position: absolute; to the :before and :after pseudo elements.
You can modify your code to have position absolute too and it will give it expected z-index rendering, however then it will move the element to a different place on the screen, as it's not bounded by the parent container anymore.
Thus, a good way is to add a pseudo element and give it the styling.
However if you want to make your code work, simply change the z-index of mask from 0 to -1.
body {
padding: 50px;
}
.button li {
float: left;
}
.button li a {
display: inline-block;
position: relative;
width: 107px;
height: 35px;
z-index: 1;
border-radius: 50px;
text-align: center;
line-height: 35px;
color: #1e1e1e;
box-shadow: inset 0px 0px 0px 2px #d3d2d2;
}
.button li .button-inner {
z-index: 3;
}
.mask {
display: block;
position: absolute;
bottom: -35px;
width: 107px;
height: 35px;
z-index: 1;
border-radius: 50px;
background-color: #d6d6d6;
opacity: 0;
transition: all 0.1s linear;
}
.button li a:hover .mask {
bottom: 0;
opacity: 1;
z-index: -1;
}
<!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="css/base.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="button">
<ul>
<li>
<a href="#">
<span class="button-inner">
探索
</span>
<span class="mask"></span>
</a>
</li>
</ul>
</div>
</body>
</html>