Develop Reference

How do I make each link show its own text on the background when hovering?

I have 3 links when hovering over which I want a certain text to appear in the background. That is, when I hover the mouse cursor over "Works", "Works" appears in the background, when I hover over "About", "About" appears in the background. I don't understand how to do this if I add a second text, they climb on top of each other.
I attach my code below (You need to open the whole page to see the result).
I will be grateful if you help
.info {
max-width: 1920px;
padding: 40px 0 0;
margin: 0 auto;
}
.info__container {
display: flex;
justify-content: space-evenly;
align-items: center;
text-decoration: none;
list-style-type: none;
font-size: 20px;
color: #1c1c1c;
background-color: #ebebeb;
margin: 0;
padding-left: 0;
height: 150px;
width: 100%;
position: relative;
z-index: 0;
overflow: hidden;
}
.info__text{
width: 60px;
z-index: 1;
}
.info__black-hover {
background: #1c1c1c;
width: 1920px;
height: 0;
opacity: 0;
visibility: hidden;
position: absolute;
transition: 0.5s opacity, 0.5s visibility, 0.6s height ease-in;
}
.info__text:hover~.info__black-hover{
width: 100%;
height: 150px;
opacity: 1;
visibility: visible;
background: #1c1c1c;
}
.info__text_hidden {
font-size: 210px;
font-family: "Roobert";
letter-spacing: -10px;
position: absolute;
color: #474747;
bottom: -38px;
left: 870px;
z-index: 1;
transform: translateY(70%);
transition: all 1.3s ease;
}
.info__text:hover~.info__text_hidden {
visibility: visible;
color: #636262;
transform: translateY(0%);
}
.info__text_decoration {
font-family: "RoxboughCF-Regular";
position: absolute;
left: -185px;
bottom: 2px;
}
.info__number {
font-size: 22px;
color: #7a7a7a;
}
.info__link {
text-decoration: none;
list-style-type: none;
color: #1c1c1c;
}
.info__link:hover {
color: white;
}
<section class="info">
<ul class="info__container">
<li class="info__text"><span class="info__number">01</span><a class="info__link" href="#"> Works</a></li>
<div class="info__text_hidden"><span class="info__text_decoration">W</span>orks</div>
<li class="info__text"><span class="info__number">02</span><a class="info__link" href="#"> About</a></li>
<div class="info__text_hidden"><span class="info__text_decoration">A</span>bout</div>
<li class="info__text"><span class="info__number">03</span><a class="info__link" href="#"> Contact</a></li>
<div class="info__black-hover"></div>
</ul>
</section>

You could perhaps use pseudo ::before elements with attr() function as the css content value...
content: attr(data-text);
Data attribute then set in the .info__link anchor tag...
<a class="info__link" href="#" data-text="Works">Works</a>
Could do with some refining but the method uses less markup.
See working demo below and fiddle... https://jsfiddle.net/joshmoto/714rpkw8/1/
.info {
max-width: 1920px;
margin: 0 auto;
}
.info__container {
display: flex;
justify-content: space-evenly;
align-items: center;
text-decoration: none;
list-style-type: none;
font-size: 20px;
color: #1c1c1c;
background-color: #ebebeb;
margin: 0;
padding-left: 0;
height: 150px;
width: 100%;
position: relative;
z-index: 0;
overflow: hidden;
}
.info__text {
width: 60px;
}
.info__number {
font-size: 22px;
color: #7a7a7a;
}
.info__link {
text-decoration: none;
list-style-type: none;
color: #1c1c1c;
}
.info__link:hover {
color: white;
}
.info__link::before {
content: attr(data-text);
display: block;
position: absolute;
left: 0px;
right: 0px;
top: 50%;
bottom: 50%;
transition: all .5s ease;
font-size: 100px;
line-height: auto;
font-family: "Roobert";
color: #474747;
background: #1c1c1c;
overflow: hidden;
z-index: -10;
}
.info__link:hover::before {
top: 0;
bottom: 0;
}
<section class="info">
<ul class="info__container">
<li class="info__text">
<span class="info__number">01</span>
<a class="info__link" href="#" data-text="Works">Works</a>
</li>
<li class="info__text">
<span class="info__number">02</span>
<a class="info__link" href="#" data-text="About">About</a>
</li>
<li class="info__text">
<span class="info__number">03</span>
<a class="info__link" href="#" data-text="Contact">Contact</a>
</li>
</ul>
</section>
Another option, is you can use :has(), tho not fully supported by all browsers yet.
See :has() compatibility https://caniuse.com/?search=has
Using :has() in this example below runs the background transition effect behind all the before elems using attr() to render the data-text attribute value.
See working demo below and fiddle... https://jsfiddle.net/joshmoto/y9164hxz/
.info {
max-width: 1920px;
margin: 0 auto;
}
.info__container {
display: flex;
justify-content: space-evenly;
align-items: center;
text-decoration: none;
list-style-type: none;
font-size: 20px;
color: #1c1c1c;
background: #ebebeb;
margin: 0;
padding-left: 0;
height: 150px;
width: 100%;
position: relative;
z-index: 0;
overflow: hidden;
}
.info__container:has(.info__link:hover) .info__link:not(:hover) {
color: #7a7a7a;
}
.info__text {
width: 60px;
}
.info__text::before {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
top: 50%;
bottom: 50%;
transition: all .5s ease;
background: #1c1c1c;
z-index: -11;
}
.info__text:has(.info__link:hover)::before {
top: 0;
bottom: 0;
}
.info__number {
font-size: 22px;
color: #7a7a7a;
display: inline-block;
}
.info__link {
text-decoration: none;
list-style-type: none;
color: #1c1c1c;
}
.info__link:hover {
color: white;
}
.info__link::before {
content: attr(data-text);
display: block;
position: absolute;
left: 0;
right: 0;
top: 50%;
bottom: 50%;
font-size: 100px;
line-height: auto;
font-family: "Roobert";
color: #474747;
overflow: hidden;
z-index: -10;
pointer-events: none;
transition: all .5s ease;
}
.info__link:hover::before {
top: 0;
bottom: 0;
}
<section class="info">
<ul class="info__container">
<li class="info__text">
<span class="info__number">01</span>
<a class="info__link" href="#" data-text="Works">Works</a>
</li>
<li class="info__text">
<span class="info__number">02</span>
<a class="info__link" href="#" data-text="About">About</a>
</li>
<li class="info__text">
<span class="info__number">03</span>
<a class="info__link" href="#" data-text="Contact">Contact</a>
</li>
</ul>
</section>
Let me know if this works or you need more refinement.
Update
I like your site design, but those effects you got on your text would be tricky to do using my pseudo element pure css version.
The closest I could get to your current design using pure CSS and pseudo elements was like this...
See fiddle version here... https://jsfiddle.net/joshmoto/d8rf93mp/
.info {
max-width: 1920px;
margin: 0 auto;
}
.info__container {
display: flex;
justify-content: space-evenly;
align-items: center;
text-decoration: none;
list-style-type: none;
font-size: 20px;
color: #1c1c1c;
background: #ebebeb;
margin: 0;
padding-left: 0;
height: 150px;
width: 100%;
position: relative;
z-index: 0;
overflow: hidden;
}
.info__container:has(.info__link:hover) .info__link:not(:hover) {
color: #7a7a7a;
}
.info__text {
width: 70px;
}
.info__text::before {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
top: 100%;
bottom: 0%;
transition: all .5s ease;
background: #1c1c1c;
z-index: -11;
}
.info__text:has(.info__link:hover)::before {
top: 0;
bottom: 0;
}
.info__number {
font-size: 22px;
color: #7a7a7a;
display: inline-block;
}
.info__link {
text-decoration: none;
list-style-type: none;
color: #1c1c1c;
}
.info__link:hover {
color: white;
}
.info__link::before {
content: attr(data-text);
display: block;
position: absolute;
left: 0;
right: 0;
top: 50%;
bottom: 50%;
font-size: 100px;
vertical-align: baseline;
line-height: 150px;
font-family: "Roobert";
color: #474747;
overflow: hidden;
z-index: -10;
pointer-events: none;
transition: all .5s ease;
text-align: center;
transform: skewY(45deg);
transform-origin: 0% 0%;
}
.info__link:hover::before {
top: 0;
bottom: 0;
transform: skewY(0deg);
}
.info__link>SPAN {
display: block;
overflow: hidden;
position: relative;
}
.info__link>SPAN::before {
content: attr(data-text);
display: block;
position: relative;
transform: translateY(0%);
transition: all .5s ease;
transform-origin: 100% 100%;
}
.info__link:hover>SPAN::before {
transform: translateY(-100%) skewY(45deg);
}
.info__link>SPAN::after {
content: attr(data-text);
display: block;
position: absolute;
width: 100%;
top: 100%;
transition: all .5s ease;
transform: skewY(45deg);
transform-origin: 0 0;
}
.info__link:hover>SPAN::after {
top: 0;
transform: skewY(0);
}
<section class="info">
<ul class="info__container">
<li class="info__text">
<span class="info__number">01</span>
<a class="info__link" href="#" data-text="Works">
<span data-text="Works"></span>
</a>
</li>
<li class="info__text">
<span class="info__number">02</span>
<a class="info__link" href="#" data-text="About">
<span data-text="About"></span>
</a>
</li>
<li class="info__text">
<span class="info__number">03</span>
<a class="info__link" href="#" data-text="Contact">
<span data-text="Contact"></span>
</a>
</li>
</ul>
</section>

Try this, I think it will be much better and simple:
CSS
section {
display: flex;
position: relative;
justify-content: space-between;
transition: .3s;
font-family:sans-serif;
background: #eee;
}
section:hover {
background: black;
}
section:hover a{
color: white;
}
section a {
width: 33%;
text-decoration: none;
font-size: 30px;
color: black;
height: 400px;
display: flex;
padding-top: 100px;
justify-content: center;
}
section .background_text {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
color: white;
align-items: center;
justify-content: center;
font-size: 100px;
pointer-events: none;
transform: translateY(100px);
opacity: 0;
transition: .3s;
}
section .background_text.active {
transform: translateY(0);
opacity: 1;
}
JAVASCRIPT
let background_text = document.querySelector('.background_text');
let links = document.querySelectorAll('a.link');
links.forEach( e => {
e.onmouseover = function () {
background_text.classList.add('active');
background_text.textContent = e.textContent;
}
e.onmouseleave = function () {
background_text.classList.remove('active');
}
});
HTML
<section>
<div class="background_text"></div>
Works
About
Contact
</section>

Making yur HTML into 'legal' code, by putting the divs holding the larger text into the li elements instead of separately, we then alter the hover state CSS so that it is the child of the hovered element that is being transformed (not a sibling as in the original).
This snippet has just those changes:
.info {
max-width: 1920px;
padding: 40px 0 0;
margin: 0 auto;
}
.info__container {
display: flex;
justify-content: space-evenly;
align-items: center;
text-decoration: none;
list-style-type: none;
font-size: 20px;
color: #1c1c1c;
background-color: #ebebeb;
margin: 0;
padding-left: 0;
height: 150px;
width: 100%;
position: relative;
z-index: 0;
overflow: hidden;
}
.info__text {
width: 60px;
z-index: 1;
}
.info__black-hover {
background: #1c1c1c;
width: 1920px;
height: 0;
opacity: 0;
visibility: hidden;
position: absolute;
transition: 0.5s opacity, 0.5s visibility, 0.6s height ease-in;
}
.info__text:hover .info__black-hover {
width: 100%;
height: 150px;
opacity: 1;
visibility: visible;
background: #1c1c1c;
}
.info__text_hidden {
font-size: 210px;
font-family: "Roobert";
letter-spacing: -10px;
position: absolute;
color: #474747;
bottom: -38px;
left: 870px;
z-index: 1;
transform: translateY(70%);
transition: all 1.3s ease;
}
.info__text:hover .info__text_hidden {
visibility: visible;
color: #636262;
transform: translateY(0%);
}
.info__text_decoration {
font-family: "RoxboughCF-Regular";
position: absolute;
left: -185px;
bottom: 2px;
}
.info__number {
font-size: 22px;
color: #7a7a7a;
}
.info__link {
text-decoration: none;
list-style-type: none;
color: #1c1c1c;
}
.info__link:hover {
color: white;
}
<section class="info">
<ul class="info__container">
<li class="info__text"><span class="info__number">01</span><a class="info__link" href="#"> Works</a>
<div class="info__text_hidden"><span class="info__text_decoration">W</span>orks</div>
</li>
<li class="info__text"><span class="info__number">02</span><a class="info__link" href="#"> About</a>
<div class="info__text_hidden"><span class="info__text_decoration">A</span>bout</div>
</li>
<li class="info__text"><span class="info__number">03</span><a class="info__link" href="#"> Contact</a>
<div class="info__black-hover"></div>
</li>
</ul>
</section>
There are other things you may want to look at. For example, would the user of first-character be helpful instead of a separate span element in the text of the large words. Also, what exactly you want the effect on the Contact element when hovered to be. At the moment just a black rectangle appears.

You can use data-attribute and access it in ::before or ::afetr css's content property. for more info visit this.
Below we are accessing data-linkfor value and displaying it in background.
/*Added css for getting currently hoverd text in backgrouond*/
.info__text::before {
content: attr(data-linkfor);
position: absolute;
top: 0;
left: 0;
font-size: 56px;
opacity: 0;
color: #fff;
transition: .5s;
}
.info__text:hover::before {
opacity: 0.6;
}
.info {
max-width: 1920px;
padding: 40px 0 0;
margin: 0 auto;
}
.info__container {
display: flex;
justify-content: space-evenly;
align-items: center;
text-decoration: none;
list-style-type: none;
font-size: 20px;
color: #1c1c1c;
background-color: #ebebeb;
margin: 0;
padding-left: 0;
height: 150px;
width: 100%;
position: relative;
z-index: 0;
overflow: hidden;
}
.info__text {
width: 60px;
z-index: 1;
}
.info__black-hover {
background: #1c1c1c;
width: 1920px;
height: 0;
opacity: 0;
visibility: hidden;
position: absolute;
transition: 0.5s opacity, 0.5s visibility, 0.6s height ease-in;
}
.info__text:hover~.info__black-hover {
width: 100%;
height: 150px;
opacity: 1;
visibility: visible;
background: #1c1c1c;
}
.info__text_hidden {
font-size: 210px;
font-family: "Roobert";
letter-spacing: -10px;
position: absolute;
color: #474747;
bottom: -38px;
left: 870px;
z-index: 1;
transform: translateY(70%);
transition: all 1.3s ease;
}
.info__text:hover~.info__text_hidden {
visibility: visible;
color: #636262;
transform: translateY(0%);
}
.info__text_decoration {
font-family: "RoxboughCF-Regular";
position: absolute;
left: -185px;
bottom: 2px;
}
.info__number {
font-size: 22px;
color: #7a7a7a;
}
.info__link {
text-decoration: none;
list-style-type: none;
color: #1c1c1c;
}
.info__text:hover .info__link {
color: #fff;
}
.info__link:hover {
color: white;
}
/*Added css for getting currently hoverd text in backgrouond*/
.info__text::before {
content: attr(data-linkfor);
position: absolute;
top: 0;
left: 0;
font-size: 56px;
opacity: 0;
color: #fff;
transition: .5s;
}
.info__text:hover::before {
opacity: 0.6;
}
<section class="info">
<ul class="info__container">
<li data-linkfor="Works" class="info__text"><span class="info__number">01</span><a class="info__link" href="#"> Works</a></li>
<li data-linkfor="About" class="info__text"><span class="info__number">02</span><a class="info__link" href="#"> About</a></li>
<li data-linkfor="Contact" class="info__text"><span class="info__number">03</span><a class="info__link" href="#"> Contact</a></li>
</ul>
</section>

I made a menu button and a menu but I don't know how to link them together

hello I made a menu button and a menu but I don't know how to link them together when you click on the menu button the menu appears from the top to the center which starts with 0% opacity and gets to 100% opacity when you click on the menu button the menu closes and fades away I will appreciate if you can help me
Here is the code
var menu = document.getElementById("menu");
menu.onclick = function(){
menu.classList.toggle("openmenu");
}
body{
background-color: #333;
}
a{
text-decoration: none;
color: inherit
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
width: 100%;
height: 0vh;
background: none;
display: flex;
align-items: top;
justify-content: right;
}
.menu{
width: 50px;
height: 50px;
margin: 3px;
background-image: linear-gradient(to right, #072AC8, #1E91D6 );
border-radius: 10px;
cursor: pointer;
}
.menu div{
width: 30px;
height: 30px;
margin: 10px;
position: relative;
}
.menu span{
background: #fff;
width: 100%;
height: 2.5px;
border-radius: 1.25px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s, width 0.5s;
}
.menu .line-1{
transform: translate(-50%, -12.5px);
}
.menu .line-3{
transform: translate(-50%, 10px);
}
.openmenu .line-1{
transform: translate(-50%, -50%) rotate(-45deg);
}
.openmenu .line-3{
transform: translate(-50%, -50%) rotate(45deg);
}
.openmenu .line-2{
width: 0;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container2{
background: #333;
width: 100%;
height: 100vh;
display: flex;
align-items: flex-start;
justify-content: center;
}
nav{
background: #fff;
border-radius: 50px;
padding: 10px;
box-shadow: 0 25px 20px -20px #000;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 13px, 35px;
margin: 10px;
font-size: 18px;
font: 500;
color: #777;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 0.5s;
}
nav ul li::after{
content: '';
background-image: linear-gradient(to right, #072AC8, #1E91D6 );
width: 100%;
height: 100%;
border-radius: 30px;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
opacity: 0;
transition: top 0.5s, opacity 0.5s;
}
nav ul li:hover{
color: #fff;
}
nav ul li:hover::after{
top: 50%;
opacity: 1;
}
<div class="container">
<div class="menu" id="menu">
<div>
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
</div>
</div>
</div>
<div class="container2">
<nav>
<ul>
<li>Home</li>
<li>Projects</li>
<li>Merch</li>
<li>About</li>
</ul>
</nav>
</div>

basically what i did was gave container 2 an active class when click on menu.and defined container2.active in the css.
making it display block in the first place and flex when active
var menu = document.getElementById("menu");
const nav = document.getElementsByClassName("container2")[0];
menu.addEventListener("click", () => {
menu.classList.toggle("openmenu");
nav.classList.toggle("active");
})
body {
background-color: #333;
}
a {
text-decoration: none;
color: inherit
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
height: 0vh;
background: none;
display: flex;
align-items: top;
justify-content: right;
}
.menu {
width: 50px;
height: 50px;
margin: 3px;
background-image: linear-gradient(to right, #072AC8, #1E91D6);
border-radius: 10px;
cursor: pointer;
}
.menu div {
width: 30px;
height: 30px;
margin: 10px;
position: relative;
}
.menu span {
background: #fff;
width: 100%;
height: 2.5px;
border-radius: 1.25px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s, width 0.5s;
}
.menu .line-1 {
transform: translate(-50%, -12.5px);
}
.menu .line-3 {
transform: translate(-50%, 10px);
}
.openmenu .line-1 {
transform: translate(-50%, -50%) rotate(-45deg);
}
.openmenu .line-3 {
transform: translate(-50%, -50%) rotate(45deg);
}
.openmenu .line-2 {
width: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container2 {
background: #333;
width: 100%;
height: 100vh;
display: none;
align-items: flex-start;
justify-content: center;
}
.container2.active {
display: flex;
}
nav {
background: #fff;
border-radius: 50px;
padding: 10px;
box-shadow: 0 25px 20px -20px #000;
}
nav ul li {
list-style: none;
display: inline-block;
padding: 13px, 35px;
margin: 10px;
font-size: 18px;
font: 500;
color: #777;
cursor: pointer;
position: relative;
z-index: 2;
transition: color 0.5s;
}
nav ul li::after {
content: '';
background-image: linear-gradient(to right, #072AC8, #1E91D6);
width: 100%;
height: 100%;
border-radius: 30px;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
opacity: 0;
transition: top 0.5s, opacity 0.5s;
}
nav ul li:hover {
color: #fff;
}
nav ul li:hover::after {
top: 50%;
opacity: 1;
}
<div class="container">
<div class="menu" id="menu">
<div>
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
</div>
</div>
</div>
<div class="container2 ">
<nav>
<ul>
<li>Home</li>
<li>Projects</li>
<li>Merch</li>
<li>About</li>
</ul>
</nav>
</div>

Why my font color in navbar didn't change when i toggle to sticky?

I'm still new to css and tried to make a sticky navbar with background of white color and black font. I'm struggling to find the solution and can't figure out what's wrong.
Here's my what my initial navbar looks like
initial navbar
And here's scrolled navbar
Scrolled Navbar
The picture isn't clear but the font is still white with a little black outline even though i changed the font color to black
Here's my HTML code:
<header id='navbar'>
LOGO
<div class="menu">
<div class="btn">
<i class="fas fa-times close-btn"></i>
</div>
Jadi Partner
Lapangan Favorit
Pesanan Saya
<div class="dropdown">
<button class="dropbtn">
<i class="fas fa-bars" id="menu-dropdown"></i><i class="fas fa-user-circle"></i>
</button>
<div class="dropdown-content">
Log In
Sign Up
</div>
</div>
</div>
<div class="btn">
<i class="fas fa-bars menu-btn"></i>
</div>
</header>
<script type="text/javascript">
window.addEventListener('scroll', function () {
// var header = document.querySelector('header');
var header = document.querySelector('header');
header.classList.toggle('sticky', window.scrollY > 0);
})
</script>
<script type="text/javascript">
//Javacript of responsive navigation menu
const menuBtn = document.querySelector(".menu-btn");
const navigation = document.querySelector(".navigation");
menuBtn.addEventListener("click", () => {
menuBtn.classList.toggle("active");
navigation.classList.toggle("active");
});
</script>
and this is the CSS part:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
header{
z-index: 999;
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 100px;
transition: 0.6s;
}
header.sticky {
background: #ffffff;
padding: 20px 100px;
}
header .brand{
color: #fff;
font-size: 30px;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
}
header .menu{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header .menu a{
color: rgb(255, 255, 255);
font-size: 16px;
font-weight: 500;
text-decoration: none;
margin: 0 30px;
padding: 0 10px;
border-radius: 20px;
transition: 0.3s;
transition-property: color, background;
}
header.sticky .menu a{
color: black !important;
z-index: 9999999;
}
header .menu a:hover{
color: #000;
background: #fff;
}
header .btn{
color: #fff;
font-size: 25px;
cursor: pointer;
display: none;
}
.dropdown {
float: right;
position: relative;
/* overflow: hidden; */
margin-left: 10px;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
font-family: inherit;
margin-left: 20px;
color: black;
background-color: #fff;
border-radius: 30px;
padding: 0 3px;
}
.dropdown-content {
display: none;
position: absolute;
top: calc(100%);
right: 0;
background-color: #ffffff;
max-width: 160px;
/* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
z-index: 9999;
border-radius: 10px;
}
.dropdown-content a {
/* float: none; */
color: black !important;
margin: 5px 0 !important;
padding: 6px 10px;
min-width: 120px;
text-decoration: none;
display: inline-block;
font-size: .8em !important;
/* text-align: left; */
/* overflow: hidden; */
}
.dropdown-content a:hover {
background-color: rgb(212, 212, 212);
}
.dropdown:hover .dropdown-content {
display: block;
}
.navigation-items {
display: flex;
justify-content: center;
align-items: center;
}
header .navigation .navigation-items #profile-dropdown {
color: black;
background-color: #fff;
border-radius: 30px;
padding: 0 3px;
}
.dropbtn i {
margin: 0 3px;
}
#menu-dropdown {
font-size: .7em;
}
header ul li a:before {
content: '';
position: absolute;
background: rgb(255, 255, 255);
border-color: #000000;
width: 0;
height: 3px;
bottom: 0;
left: 0;
transition: 0.3s ease;
}
header ul li a:hover:before {
width: 100%;
}
This part is edited
I found out that with only navbar it works perfectly fine, but the problem occure when i add background image below navbar. Here's my background code below navbar:
<section class="home">
<div class="images-home">
<img src="{% static 'main/images/basketball.jfif' %}" alt="" class="image-slide">
<img src="{% static 'main/images/prapoth-panchuea-OMWubltUEfE-unsplash.jpg' %}" alt="" class="image-slide">
<img src="{% static 'main/images/muktasim-azlan-rjWfNR_AC5g-unsplash.jpg' %}" alt="" class="image-slide">
</div>
<div class="content">
<h1>Train. Grow. Repeat.<br></h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores magnam quia vitae, animi unde consequuntur
nihil doloribus quidem culpa, voluptatem, harum consequatur laboriosam delectus officia!</p>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span> Booking sekarang</a>
</div>
<div class="slider-navigation">
<div onclick="slider_nav(1)" class="nav-btn" id="radio1"></div>
<div onclick="slider_nav(2)" class="nav-btn" id="radio2"></div>
<div onclick="slider_nav(3)" class="nav-btn" id="radio3"></div>
</div>
</section>
and here's CSS for background:
section {
padding: 100px 200px;
}
.home {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
flex-direction: column;
/* background: #267be9; */
background: #ED1E1E;
}
.home:before {
z-index: 777;
content: '';
position: absolute;
/* background: rgba(62, 129, 245, 0.3); */
background: rgba(212, 11, 11, 0.3);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.home .content {
z-index: 888;
/* color: #fff; */
color: #fff;
width: 60%;
margin: 50px 70px;
position: absolute;
left: 0%;
}
.home .content h1 {
font-size: 3.5em;
font-weight: 700;
/* text-transform: uppercase; */
letter-spacing: 5px;
line-height: 75px;
margin-bottom: 40px;
}
.home .content p {
margin-bottom: 65px;
max-width: 50%;
/* font-size: 1.2vw; */
}
.home .content a {
/* background: #fff; */
width: 30%;
background: #ED1E1E;
padding: 15px 35px;
/* color: #1680AC; */
/* color: #ED1E1E; */
color: #ffffff;
/* font-size: 1.1em; */
font-size: 1.4vw;
font-weight: 500;
text-decoration: none;
text-transform: uppercase;
position: relative;
/* display: flex; */
}
.home .content a:hover {
color: var(--main-color);
background-color: #fff;
}
.home .content a span {
display: block;
position: absolute;
background: var(--main-color);
}
.home .content a span:nth-child(1) {
left: 0;
bottom: 0;
width: 2px;
height: 100%;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.5s;
}
.home .content a:hover span:nth-child(1) {
transform: scaleY(1);
transform-origin: bottom;
transition: transform 0.5s;
}
.home .content a span:nth-child(2) {
left: 0;
bottom: 0;
width: 100%;
height: 2px;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
}
.home .content a:hover span:nth-child(2) {
transform: scaleX(1);
transform-origin: left;
transition: transform 0.5s;
}
.home .content a span:nth-child(3) {
right: 0;
bottom: 0;
width: 2px;
height: 100%;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home .content a:hover span:nth-child(3) {
transform: scaleY(1);
transform-origin: bottom;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home .content a span:nth-child(4) {
left: 0;
top: 0;
width: 100%;
height: 2px;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home .content a:hover span:nth-child(4) {
transform: scaleX(1);
transform-origin: left;
transition: transform 0.5s;
transition-delay: 0.5s;
}
.home img {
z-index: 000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.home .media-icons {
z-index: 888;
position: absolute;
right: 30px;
display: flex;
flex-direction: column;
transition: 0.5s ease;
}
.home .media-icons a {
color: #fff;
font-size: 1.6em;
transition: 0.3s ease;
}
.home .media-icons a:not(:last-child) {
margin-bottom: 20px;
}
.home .media-icons a:hover {
transform: scale(1.3);
}
.slider-navigation {
z-index: 888;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
/* transform: translateY(80px); */
/* margin-bottom: 12px; */
bottom: 5%;
left: 50%;
transform: translateX(-50%);
}
.slider-navigation .nav-btn {
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
transition: 0.3s ease;
}
.slider-navigation .nav-btn:not(:last-child) {
margin-right: 20px;
}
.slider-navigation .nav-btn:hover {
transform: scale(1.2);
}
.slider-navigation .nav-btn.active {
background: var(--main-color);
}
#media (max-width: 1040px) {
section {
padding: 100px 20px;
}
.home .content {
margin: 0 20px;
}
.home .media-icons {
right: 15px;
}
.home .content h1 {
font-size: 4vw;
line-height: 60px;
}
.home .content p {
margin-bottom: 65px;
max-width: 40%;
font-size: 13px;
}
}
#media (max-width: 560px) {
.home .content {
margin: 0 20px;
}
.home .content h1 {
/* font-size: 2em; */
line-height: 60px;
}
.home .content p {
margin-bottom: 65px;
max-width: 40%;
font-size: 10px;
}
.home .content a {
max-width: 10px;
padding: 10px 25px;
}
}
I read something about !important, but it dind't help. Thank you for anyone who are willing to help an amateur like me :)

You need to add background-color and color property to the header selector not header .sticky.
As you're dynamically adding the sticky class, so at first render the colors are not actually visible.
UPDATE
Checked your codepen and you're missing the property when .sticky class is applied via JS
header.sticky .dropdown .dropbtn {
background-color: #000;
}
header.sticky .brand{
color: #000;
}

Responsive navigation box

I made a navigation bar with CSS animation and javascript. But I could not make it responsive. I want the navigation bar animation to be none when the window is resized less than 700px and the animation should appear if it is greater than 700px.That means the transform property of three-d-box :hover on css paart must be hidden when window is resized to 700px.The navigation bar code is below;
$('.block-menu').find('a').each(function(){
var el = $(this),
elText = el.text();
el.addClass("three-d");
el.append('<span aria-hidden="true" class="three-d-box"><span class="front">'+elText+'</span><span class="back">'+elText+'</span></span>');
});
.container {
width: match-parent;
padding: 12px ;
display: flex;
align-items: center;
justify-content: center;
}
a {
color: #fc0;
text-decoration:none;
}
.block-menu {
width:fit-content;
height:fit-content;
}
.block-menu li {
display: inline-block;
}
.block-menu li a {
color: #fff;
display: block;
text-decoration: none;
font-family: 'Passion One', Arial, sans-serif;
font-smoothing: antialiased;
text-transform: uppercase;
font-family: 'Righteous', cursive;
overflow: visible;
width:fit-content;
height: fit-content;
font-size: 1.6vw;
padding: 15px 10px;
margin-left:auto;
margin-right:auto;
margin-top:1px;
margin-bottom:1px;
}
.three-d {
perspective: 200px;
transition: all .07s linear;
position: relative;
cursor: pointer;
}
.three-d:hover .three-d-box,
.three-d:focus .three-d-box {
transform: translateZ(-25px) rotateX(90deg);
}
.three-d-box {
transition: all 0.3s ease-out;
transform: translatez(-25px);
transform-style: preserve-3d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
.front {
transform: rotatex(0deg) translatez(25px);
}
.back {
transform: rotatex(-90deg) translatez(25px);
color: #ffe7c4;
}
.front, .back {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius:15%;
background: black;
padding: 15px 10px;
color: white;
pointer-events: none;
box-sizing: border-box;
}
.back {
background: #d05ce8;
}
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<div id="navbox">
<div class="container" id="navbar">
<ul class="block-menu"><b>
<li >Gifts Corner</li>
<li >Our activities</li>
<li >Inspiration</li>
<li >Education</li>
<li >About us</li>
</ul></b>
</div>

sliding responsive nav - flash on load and responsive page

I have made my own responsive nav using css and jquery for the nav. I want the nav to fade in on burger button click and slide into view. I have this working well. However, when the page loads or the page is made smaller, the nav is shown briefly before sliding away.
see link
www.update.jonfullerwebdesign.co.uk
nav {
position: fixed;
width: 100%;
background: rgba($dark-grey, .8);
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
min-height: 50px;
z-index: 999;
#include desktop {
background: rgba($dark-grey, .7);
}
.logo {
width: 52px;
position: absolute;
left:15px;
top:10px;
z-index: 20;
#include desktop {
top: 8px;
}
}
.menu-button {
position: absolute;
top:15px;
right:15px;
z-index: 200;
#include desktop {
display:none;
}
}
ul {
width: 100vw;
height: 100vh;
opacity: 0;
display: flex;
// position: absolute;
transform: translateX(-100%);
top: 0;
background: inherit;
flex-direction: column;
justify-content: center;
transition: all 800ms ease-in;
#include desktop {
position: relative;
display: flex;
opacity: 1;
transform: translateX(0);
height: auto;
flex-direction: row;
justify-content: center;
align-content: center;
align-items: center;
transition: none;
background: none;
}
li {
display: block;
text-align: center;
margin-bottom: 30px;
#include desktop {
margin-bottom: 0;
margin-left: 3%;
margin-right: 3%;
}
a {
display: block;
width: 100%;
padding: 1px;
color: white;
font-size: 44px;
font-weight: 300;
text-decoration: none;
text-transform: uppercase;
padding: 30px 0;
&:hover,
&:focus {
color:$brand-blue;
}
#include desktop {
font-size: 22px;
padding: 5px;
}
}
.active {
color: $brand-blue;
}
}
}
.shown {
opacity: 1;
transform: translateX(0);
padding-top: 40px;
padding-bottom: 40px;
display: flex;
#include desktop {
padding: 0;
}
}
}
$(document).ready(function(){
$(".menu-button").click(function(){
$("nav ul").toggleClass("shown")
});
});

You need to include the new transition values within your media query. Your current default is transform: translateX(0);
#media (min-width: 62rem){
nav ul {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
}