I have a button animation on hover pseudo element. While the fill works fine, the font color does not change. I am sure this is something silly on my part, can't figure out where I am going wrong.
Will appreciate a lot is someone could point me in the right direction.
code pen example here
https://codepen.io/sabarishiyer/pen/RwaOJyO
code
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box
}
html {
font-family: Verdana, sans-serif, Arial;
font-size: 10px
}
body {
display: flex;
width: 100%;
height: 100vh;
align-items: center;
justify-content: center;
background-color: #272838
}
.button {
text-decoration: none;
color: aquamarine;
border: 3px solid aquamarine;
padding: 2rem 5rem;
font-size: 2.5rem;
position: relative;
/*To position pseudo elements relative to the button*/
transition: all 1s;
}
.button::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 100%;
transition: all 1s;
color: aquamarine;
background-color: white;
}
.button::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 100%;
transition: all 1s;
background-color: #fff;
color: aquamarine;
}
.button:hover {
color: #272838;
background-color: #fff;
}
.button:hover:before {
width: 100%;
}
<html>
<head>
<link type="text/css" rel="stylesheet" href="styles.css" />
</head>
<body>
<a class="button" href="#">Learn more</a>
</body>
</html>
your problem is not the text color, it is the z-index. add this:
.button::after,
.button::before {
z-index: -1;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box
}
html {
font-family: Verdana, sans-serif, Arial;
font-size: 10px
}
body {
display: flex;
width: 100%;
height: 100vh;
align-items: center;
justify-content: center;
background-color: #272838
}
.button {
text-decoration: none;
color: aquamarine;
border: 3px solid aquamarine;
padding: 2rem 5rem;
font-size: 2.5rem;
position: relative;
/*To position pseudo elements relative to the button*/
transition: all 1s;
}
.button::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 100%;
transition: all 1s;
color: aquamarine;
background-color: white;
}
.button::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 100%;
transition: all 1s;
background-color: #fff;
color: aquamarine;
z-index: -1;
}
.button:hover {
color: #272838;
background-color: #fff;
}
.button:hover:before {
width: 100%;
}
<html>
<head>
<link type="text/css" rel="stylesheet" href="styles.css" />
</head>
<body>
<a class="button" href="#">Learn more</a>
</body>
</html>
Adding the z-index: -1 to .button should do the trick
use z-index: -1;
.button::before {
z-index: -1;
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 100%;
transition: all 1s;
background-color: #fff;
color: aquamarine;
}
Related
So i have made a website with HTML and CSS. It has different effects like the parallax effect(a very simple version of it), transparent navbar, and now I am trying to make my Navbar responsive. Everything works, but my hamburger menu is very far to the left and when I find a way to move it, it doesnt work after i moved it.
As you can see it is very close to the top of the screne and so far to the left that it is past the logo. I want it to stay to the right even if i made the screen smaller ofr bigger, like it moves with the screen when i move it.
This is my css code:
#font-face {
font-family: 'Poppins';
src: url(Fonts/Poppins-Regular.ttf
}
#font-face {
font-family: 'Comfortaa';
src: url(Fonts/Comfortaa-VariableFont_wght.ttf);
}
#font-face {
font-family: 'DancingScript';
src: url(Fonts/DancingScript-VariableFont_wght.ttf);
}
* {
padding: 0;
margin: 0;
color: #A6808C;
box-sizing: border-box;
}
body {
background-color: #565264;
font-family: Poppins;
}
html {
overflow: scroll;
overflow-y: hidden;
}
::-webkit-scrollbar {
width: 0%;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
padding: 10px 90px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.4);
border-bottom: 0px solid #fff;
z-index: 9999
}
nav .logo {
padding: -22px 20px;
height: 50px;
float: left;
}
nav ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
nav ul li a {
line-height: 60px;
color: #fff;
padding: 12px 30px;
text-decoration: none;
font-size: 25px;
}
nav ul li a:hover {
background: rgba(0,0,0,0.1);
border-radius: 5px;
}
.text {
font-size: 2rem;
padding: 2rem;
background-color: #565264;
color: whitesmoke;
}
.title {
font-size: 7rem;
color: whitesmoke;
text-shadow: 0 0 5px black;
}
.background {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index: -1;
transform: translateZ(-10px) scale(3);
background-repeat: no-repeat;
}
header {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
transform-style: preserve-3d;
z-index: -1;
}
.wrapper {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
}
.hamburger {
position: relative;
width: 30px;
height: 4px;
background: #fff;
border-radius: 10px;
cursor: pointer;
z-index: 2;
transition: 0.3s;
}
.hamburger:before, .hamburger:after {
content: "";
position: absolute;
height: 4px;
right: 0;
background: #fff;
border-radius: 10px;
transition: 0.3s;
}
.hamburger:before {
top: -10px;
width: 20px;
}
.hamburger:after {
top: 10px;
width: 20px;
}
.toggle-menu {
position: absolute;
width: 30px;
height: 100%;
z-index: 3;
cursor: pointer;
opacity: 0;
}
.hamburger, .toggle-menu {
display: none;
}
.navigation input:checked ~ .hamburger {
background: transparent;
}
.navigation input:checked ~ .hamburger::before {
top: 0;
transform: rotate(-45deg);
width: 30px;
}
.navigation input:checked ~ .hamburger::after {
top: 0;
transform: rotate(45deg);
width: 30px;
}
.navigation input:checked ~ .menu {
right: 0;
box-shadow: -20px 0 40px rgba(0,0,0,0.3);
}
#media screen and (max-width: 1062px) {
.hamburger, .toggle-menu {
display: block;
}
.header {
padding: 10px 20px;
}
nav ul {
justify-content: start;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
right: -300px;
background-color: #565264;
width: 300px;
height: 100%;
padding-top: 65px;
}
.menu li {
width: 100%;
}
.menu li a, .menu li a:hover {
padding: 30px;
font-size: 24px;
box-shadow: 0 1px 0 rgba(112,102,119,0.5) inset;
}
}
<head>
<meta charset="utf-8">
<meta name="veiwport" content="width=device-width, initalscale=1.0">
<Title>Test</Title>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<nav>
<div class="logo">
<a href="index.html">
<img src="Pictures\Logo DesignK whitegreen.png" alt="DesignK" height="50px" width="200px">
</a>
</div>
<div class="navigation">
<input type="checkbox" class="toggle-menu">
<div class="hamburger"></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li>Feedback</li>
</ul>
</div>
</nav>
<div class="wrapper">
<header>
<img src="Pictures/LakeandMoutains.jpg" class="background">
<h1 class="title">Welcome!</h1>
</header>
<section class="text">
<h3>Essay on Mountains</h3>
</section>
</div>
</body>
Does anyone know how to make the hamburger menu move to the right side of the screen?
Update your .hamburger, .toggle-menu styles like this
.hamburger, .toggle-menu {
display: block;
position: absolute;
right: 30px;
}
Update the value of right according to your need.
You could always use flexbox. The following lines of code will display this on the right hand side:-
nav {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.navigation {
margin-left: auto;
}
Add this to your navigation class:
.navigation{
position:relative;
}
and then this to your hamburger menu to make it stick to the right.
.hamburger{
position:relative;
right:8%;
}
The position absolute will make the hamburger-menu stick relative to the navigation bar and right 8% will stick it to the right.
You must understand the importance of HTML structure and positioning because this is the problem in your HTML.
To fix your problem, you need to put the burger menu and the check box in one container and then position the container.
The problem now is that you are positioning every part individually and their width and height are not properly set.
try to follow the steps I mentioned then let us know if you can do it or not.
I have been working on a custom-styled checkbox, but for some reason, the square when the toggle is checked is getting lost.
Anyone could please point out what I did wrong with this checkbox?
https://jsfiddle.net/d67k5uyq/6/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>switch toggle menu using html css only</title>
</head>
<body>
<div class="container">
<div>
<input type="checkbox" class="toggle" id="default">
<label for="default" data-checked="Checked" data-unchecked="Unchecked"></label>
</div>
</div>
</body>
</html>
I believe is something to do with the before and after where I'm forgetting to set some value.
CSS
body{
background: #485461;
font-family: sans-serif;
height: 100vh;
overflow: hidden;
}
.container{
margin: 0 auto;
text-align: center;
padding-top: 30px;
color: white;
}
input[type=checkbox].toggle{
display: none;
}
input[type=checkbox].toggle + label{
display: inline-block;
height: 60px;
width: 200px;
position: relative;
font-size:20px;
border: 4px solid white;
padding: 0;
margin: 0;
cursor: pointer;
box-sizing: border-box;
transition: all 0.3s ease;
}
input[type=checkbox].toggle + label:before{
position: absolute;
top: 4px;
height: 44px;
width: 44px;
content: '';
transition: all 0.3s ease;
z-index: 3;
}
input[type=checkbox].toggle + label:after{
width: 140px;
text-align: center;
z-index: 2;
text-transform: uppercase;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-overflow: ellipsis;
overflow: hidden;
}
input[type=checkbox].toggle:not(:checked) + label{
background-color: transparent;
text-align: right;
}
input[type=checkbox].toggle:not(:checked) + label:after{
content: attr(data-unchecked);
right: 0;
left: auto;
opacity: 1;
color: white;
}
input[type=checkbox].toggle:not(:checked) + label:before{
left: 4px;
background-color: white;
}
input[type=checkbox].toggle:checked + label{
text-align: left;
border-color: yellow;
}
input[type=checkbox].toggle:checked + label:after{
content: attr(data-checked);
left: 4px;
right: auto;
opacity: 1;
color: white;
}
input[type=checkbox].toggle:checked + label:before{
left: 144px;
border-color: yellow;
}
When the input is unchecked then the before pseudo element is given a background color of white.
When it is checked then it is given a color to the border, but the border has not been given any width.
Assuming you want a yellow bordered square the this snippet not only sets the border color but also solid and 1px width.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>switch toggle menu using html css only</title>
<style>
body {
background: #485461;
font-family: sans-serif;
height: 100vh;
overflow: hidden;
}
.container {
margin: 0 auto;
text-align: center;
padding-top: 30px;
color: white;
}
input[type=checkbox].toggle {
display: none;
}
input[type=checkbox].toggle+label {
display: inline-block;
height: 60px;
width: 200px;
position: relative;
font-size: 20px;
border: 4px solid white;
padding: 0;
margin: 0;
cursor: pointer;
box-sizing: border-box;
transition: all 0.3s ease;
}
input[type=checkbox].toggle+label::before {
position: absolute;
top: 4px;
height: 44px;
width: 44px;
content: '';
transition: all 0.3s ease;
z-index: 3;
}
input[type=checkbox].toggle+label::after {
width: 140px;
text-align: center;
z-index: 2;
text-transform: uppercase;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-overflow: ellipsis;
overflow: hidden;
content: 'A';
}
input[type=checkbox].toggle:not(:checked)+label {
background-color: transparent;
text-align: right;
}
input[type=checkbox].toggle:not(:checked)+label::after {
content: attr(data-unchecked);
right: 0;
left: auto;
opacity: 1;
color: white;
}
input[type=checkbox].toggle:not(:checked)+label::before {
left: 4px;
background-color: white;
}
input[type=checkbox].toggle:checked+label {
text-align: left;
border-color: yellow;
}
input[type=checkbox].toggle:checked+label::after {
content: attr(data-checked);
left: 4px;
right: auto;
opacity: 0.5;
color: white;
}
input[type=checkbox].toggle:checked+label::before {
left: 144px;
border-color: yellow;
border-style: solid;
border-width: 1px;
}
</style>
</head>
<body>
<div class="container">
<div>
<input type="checkbox" class="toggle" id="default">
<label for="default" data-checked="Checked" data-unchecked="Unchecked"></label>
</div>
</div>
</body>
</html>
I am attempting to following along with a video in creating a full website project. Currently attempting to add animation into a header that's split into three and all under . For whatever reason, I am not able to replicate what he does in the video when it comes to covering the header with a background and applying the animation. When I write up the same code the header does not get fully blocked and my animation isn't the same as the one in the video.
What it should look like proper way the header should be covered
What it looks like when I code it: enter image description here
#import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght#200&display=swap');
* {
Padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
color: white;
font-family: 'IBM Plex Serif', serif;
}
a {
text-decoration: none;
}
body {
background: rgb(123, 127, 153);
}
.container {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
/* Hero Section */
#hero {
background-image: url(./img/galaxy.jpeg);
background-size: cover;
background-position: top center;
position: relative;
z-index: 1;
}
#hero::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: blue;
opacity: .2;
z-index: -1;
}
#hero h1 {
display: block;
width: fit-content;
font-size: 4rem;
position: relative;
color: white;
}
#hero span {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: red;
animation: text_reveal_box 1s ease;
}
#hero .cta {
display: inline-block;
padding: 10px 30px;
position: relative;
left: 55px;
align-items: center;
color: red;
background-color: transparent;
border: 2px solid red;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: .1rem;
margin-top: 30px;
transition: .3s ease;
transition-property: background-color, color;
}
#hero .cta:hover {
color: white;
background-color: red;
}
/* End Hero Section */
/*keyframes*/
#keyframes text_reveal_box {
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>FullSite</title>
<meta charset="UTF-8">
</head>
<body>
<!-- Start Hero Section -->
<section id="hero">
<div class="hero container">
<div>
<h1><span>Hello...</span></h1>
<h1><span>We are</span></h1>
<h1><span>J.P.Astronomics</span></h1>
Portfolio
</div>
</div>
</section>
<!-- End Hero Section -->
<!-- Start Astronomical Goals-->
<section id="service">
<div class="service container">
<div class="serivce-top">
<h1 class="section-title">Astronomical Goals</h1>
</div>
</div>
</section>
<!--End Astronomical Goals-->
</body>
</html>
You have to remove the following css and ass some styles to achieve the design
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
#import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght#200&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
color: white;
font-family: "IBM Plex Serif", serif;
}
a {
text-decoration: none;
}
body {
background: rgb(123, 127, 153);
}
.container {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
/* Hero Section */
#hero {
background-image: url(./img/galaxy.jpeg);
background-size: cover;
background-position: top center;
position: relative;
z-index: 1;
}
#hero::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: blue;
opacity: 0.2;
z-index: -1;
}
#hero h1 {
font-size: 4rem;
position: relative;
color: white;
}
.content-wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
}
#hero span {
background-color: red;
color: red;
animation: text_reveal_box 1s ease;
}
#hero .cta {
display: inline-block;
padding: 10px 30px;
position: relative;
align-items: center;
color: red;
background-color: transparent;
border: 2px solid red;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: 0.1rem;
margin-top: 30px;
transition: 0.3s ease;
transition-property: background-color, color;
}
#hero .cta:hover {
color: white;
background-color: red;
}
/* End Hero Section */
/*keyframes*/
#keyframes text_reveal_box {
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
<section id="hero">
<div class="hero container">
<div class="heading-wrapper">
<h1><span>Hello...</span></h1>
<h1><span>J.P.Astronomics</span></h1>
<h1><span>We are</span></h1>
Portfolio
</div>
</div>
</section>
<!-- End Hero Section -->
<!-- Start Astronomical Goals-->
<section id="service">
<div class="service container">
<div class="serivce-top">
<h1 class="section-title">Astronomical Goals</h1>
</div>
</div>
</section>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
body {
background: rgb(123, 127, 153);
}
.container {
width: min(80%, 1200px);
margin: auto;
min-height: 100vh;
}
.hero {
border: 2px solid red;
display: grid;
place-items: center;
}
.hero-text {
border: 2px solid yellow;
display: inline-block;
line-height: 1;
margin: 5em auto;
}
span {
display: inline-block;
margin-right: auto;
position: relative;
font-size: clamp(1.5rem, 5vw + 10px, 3rem);
animation: reveal_anim 1s forwards;
}
span::before {
content: "";
position: absolute;
background-color: red;
display: block;
width: 100%;
height: 100%;
z-index: -1;
}
a {
text-decoration: none;
}
.cta {
display: inline-block;
margin-right: auto;
margin-top: 1em;
padding: 0.2em 0.5em;
font-size: clamp(1rem, 5vw, 2rem);
border: 2px solid blue;
animation: reveal_anim 1s forwards;
animation-delay: 500ms;
opacity: 0;
}
#keyframes reveal_anim {
0% {
transform: translateX(50%);
}
50% {
opacity: 0.5;
}
100% {
transform: translateX(0%);
opacity: 1;
}
}
<!-- Start Hero Section -->
<section id="hero">
<div class="hero container">
<div class="hero-text">
<h1><span>Hello...</span><br>
<span>We are</span><br>
<span>J.P.Astronomics</span>
</h1>
Portfolio
</div>
</div>
</section>
<!-- End Hero Section -->
<!-- Start Astronomical Goals-->
<section id="service">
<div class="service container">
<div class="serivce-top">
<h1 class="section-title">Astronomical Goals</h1>
</div>
</div>
</section>
<!--End Astronomical Goals-->
Sorry to have changed the HTML a bit.
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How can I center an absolutely positioned element in a div?
(37 answers)
Closed 2 years ago.
How do I center this header? I've tried about everything, and nothing works. ;-;
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700italic);
* {
margin: 0;
padding: 0;
}
html,
body {
max-width: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
body {
background: #2c3e50;
font-size: 80%;
font-family: 'Open Sans', sans-serif;
}
.bg {
z-index: -1;
width: 100%;
height: 100%;
position: absolute;
background: linear-gradient( 45deg, #f17c58, #e94584, #24aadb, #27dbb1, #ffdc18, #ff3706);
background-size: 600% 100%;
animation: gradient 16s linear infinite;
animation-direction: alternate;
}
#keyframes gradient {
0% {
background-position: 0%;
}
100% {
background-position: 100%;
}
}
main {
position: relative;
height: 240px;
margin: auto;
padding: 20px;
resize: both;
}
.btn-grp {
height: 68px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
text-decoration: none;
color: #fff;
}
a:hover {
color: #2ecc71;
}
.btn {
text-align: center;
cursor: pointer;
font-size: 24px;
position: relative;
background-color: #f39c12;
border: none;
padding: 20px;
width: 200px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
}
.btn:hover {
background: #fff;
box-shadow: 0 2px 10px 5px #97b1bf;
color: #000;
}
.btn:after {
content: '';
background: #f1c40f;
display: block;
position: absolute;
opacity: 0;
transition: all 0.8s;
}
.btn:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}
.down {
Position: absolute;
Bottom: 85%;
}
<html lang="en">
<head>
</head>
<body>
<div class="bg"></div>
<div class="down">
<h1>Welcome</h1>
</div>
<main>
<div class="btn-grp">
<a href="#" target="_blank">
<button class="btn" id="btn-home">Home</button>
</a>
<a href="#" target="_blank">
<button class="btn" id="btn-dl">Download</button>
</a>
</div>
</main>
</body>
</html>
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700italic);
* {
margin: 0;
padding: 0;
}
html,
body {
max-width: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
body {
background: #2c3e50;
font-size: 80%;
font-family: 'Open Sans', sans-serif;
}
.bg {
z-index: -1;
width: 100%;
height: 100%;
position: absolute;
background: linear-gradient(
45deg,
#f17c58,
#e94584,
#24aadb,
#27dbb1,
#ffdc18,
#ff3706
);
background-size: 600% 100%;
animation: gradient 16s linear infinite;
animation-direction: alternate;
}
#keyframes gradient {
0% {
background-position: 0%;
}
100% {
background-position: 100%;
}
}
main {
position: relative;
height: 240px;
margin: auto;
padding: 20px;
resize: both;
}
.btn-grp {
height: 68px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {text-decoration: none; color: #fff;}
a:hover {color: #2ecc71;}
.btn {
text-align: center;
cursor: pointer;
font-size: 24px;
position: relative;
background-color: #f39c12;
border: none;
padding: 20px;
width: 200px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
}
.btn:hover {
background: #fff;
box-shadow: 0 2px 10px 5px #97b1bf;
color: #000;
}
.btn:after {
content: '';
background: #f1c40f;
display: block;
position: absolute;
opacity: 0;
transition: all 0.8s;
}
.btn:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}
.down {
Position: absolute;
Bottom: 85%;
width: 100%;
text-align: center;
}
<html lang="en">
<head>
</head>
<body>
<div class="bg"></div>
<div class="down">
<h1>Welcome</h1>
</div>
<main>
<div class="btn-grp">
<a href="#" target="_blank">
<button class="btn" id="btn-home">Home</button>
</a>
<a href="#" target="_blank">
<button class="btn" id="btn-dl">Download</button>
</a>
</div>
</main>
</body>
</html>
Changed the css for only .down class like this :
.down {
Position: absolute;
Bottom: 85%;
width: 100%;
text-align: center;
}
i made a slidermenu, but i failed some stuff. I dont know how to make it sticky. but the biggest problem is that it looks wheird when i add it to my main file. it works fine when i run the slidebar on a clear page but when i implemnt it into this file it looks crazy. the sysmbols r not infront of the text anymore.
can anyone tell me how i can add the slidermenu to this file right
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<script src="../js/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="../css/stylesearch.css">
<link rel="icon" href="../images/logo.ico">
<link rel="stylesheet" href="../css/slidebar.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Search</title>
</head>
<body>
<div id="background-box" onclick="tag()"></div>
<div class="container" id="tag-box">
<div><a class="close-box" onclick="tag(), getValue()">×</a></div>
<br>Selectable Tags:</br>
</div>
<nav>
<script src="../js/slidebar.js"></script>
<img class="image-size" src="../images/logo.png">
<div class="bars"><i class="fa fa-bars fa-4x" id="scale" onclick="slidebar()"></i></div>
<a><img class="image-size" src="../images/menu.png" onclick=""></a>
<button id="btnabout" onclick="tag()">Tags</button>
<div class="search_box"><input type="text" name="box" id="search_text" placeholder="Search by name" class="form-control" /></div>
<div id="background-boxtitle" onclick="tag()"></div>
</nav>
<section class="sec1">
<div class="slidebar" id="slidebar"><?php include '../db/slidebar.php'; echo $slidebarbutton;?></div>
</section>
<section class="sec2">
<script src="../js/search.js"></script>
<div id="result"></div>
<div style="clear:both"></div>
</section>
<section class="sec3">
</section>
</body>
</html>
:root {
--slidermenu-color: #303030;
}
#slidebar{
position:absolute;
left:-15%;
width: 15%;
height: 100%;
transition: .5s;
background: var(--slidermenu-color);
overflow: scroll;
overflow-x: hidden;
}
#slidebar.active{
left: 0%;
}
#slidebarlock{
position: absolute;
left: -100%;
width: 85%;
height: 100%;
background: transparent;
transition: .5s;
}
#slidebarlock.active{
left: 15%;
}
.slidebarbutton {
background-color: #303030;
border: none;
color: white;
text-align: left;
text-decoration: none;
display: inline-block;
font-size: 30px;
cursor: pointer;
padding: 20px 0px;
width: 100%;
}
.slidebarbutton:hover{
background-color: #494949;
}
.bars:hover{
cursor: pointer;
}
.slidebarbutton div i{
padding-left:20px;
padding-right: 40px;
}
#slidebar::-webkit-scrollbar {
width: 5px;
}
#slidebar::-webkit-scrollbar-track {
background: var(--slidermenu-color);
}
#slidebar::-webkit-scrollbar-thumb {
background: transparent;
}
#slidebar:hover::-webkit-scrollbar-thumb{
background: black;
opacity: .8;
border-radius: 30px;
}
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #222;;
}
header{
padding: 10px 100px;
box-sizing: border-box;
}
section{
width: 100%;
height: 100vh;
}
section.sec1{
width: 100%;
height: 50px;
}
div.gallery:hover {
border: 2px solid #404040;
background: #404040;
}
div.gallery {
margin: 5px;
border: 2px solid #222;
float: left;
width: 215px;
height: 400px;
color: #fff;
}
div.gallery img {
width: 100%;
height: 80%;
}
div.desc {
padding: 15px;
text-align: center;
}
section.sec3{
padding: 100px;
box-sizing: border-box;
height: auto;
}
section.sec3 h2{
font-size: 3em;
margin:0;
padding: 0;
color: #fff;
}
nav{
width: 100%;
height: 120px;
background: url(../images/bg1.jpg);
position: sticky;
top: 0px;
}
nav ul{
display: flex;
}
.image-size{
position: absolute;
top: 10%;
right: 1%;
height: 40px;
}
.search_box{
position: absolute;
top: 20%;
left: 50%;
transform: translate(-150%, -50%);
height: 20px;
}
.search_box input[type="text"]{
width: 300%;
padding: 20px;
padding-right: 60px;
box-sizing: border-box;
background: rgba(0,0,0,0.3);
border: 2px solid #fff;
border-radius: 10px;
font-size: 18px;
color: #fff;
outline: none;
}
.fa-search{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 25px;
color: #fff;
font-size: 25px;
}
::-webkit-input-placeholder {
color: #fff;
}
::-moz-placeholder {
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
#media screen and (max-width: 425px){
.search_box{
width: 95%;
}
}
#tag-box{
position: absolute;
top: -120%;
left: 20%;
width: 60%;
height: 500px;
background: #000;
transition: .5s;
opacity: 0.9;
border-radius: 30px;
}
#tag-box.active{
top: 25%;
}
.container{
max-width: 60%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.container div{
margin: 5px;
}
.container div a{
font-size: 2em;
margin:0;
padding: 0;
color: #fff;
cursor: pointer;
}
.container div a:hover{
color: #f00;
}
.container div label{
cursor: pointer;
}
.container div label input[type="checkbox"]{
display: none;
}
.container div label span{
position: relative;
display: inline-block;
background: #424242;
color: #fff;
padding: 5px 10px;
color: 555;
text-shadow: 0 1px 4px rgba(0,0,0,.5);
border-radius: 15px;
font-size: 12px;
transition: 0.5s;
user-select: none;
overflow: hidden;
border: 2px solid #FFA500;
}
.container div label span:before{
content: '';
position: absolute;
top: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%
}
.container div label input[type="checkbox"]:checked ~ span{
background: #FFA500;
color: #fff;
border: 2px solid #FFA500;
box-shadow: 0 2px 15px #FFA500;
}
#background-box {
position: absolute;
top: -120%;
left: 0%;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
}
#background-box.active{
top: 0%;
}
#background-boxtitle {
position: absolute;
top: -120%;
left: 0%;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
}
#background-boxtitle.active{
top: 0%;
}
#scale{
transition: .5s;
color:white;
transform: translate(22px, 16px);
}
#scale.active{
transition: .5s;
transform: translate(22px, 16px) rotate(90deg);
}