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>

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;
}

Close sidebar menu when click outside of it and when click on menu item

The target is to close the sidebar menu when I click outside of it or when I click on one of the menu item. I've created the two working functions in Javascript to open and close the menu, clicking on the toggle:
<script>
function openNav() {
document.getElementById("#sideMenu").style.width = "250px";
}
function closeNav() {
document.getElementById("#sideMenu").style.width = "0";
}
function clickOutsite() {
TO-DO
}
function clickOnItemAndClose() {
TO-DO
}
</script>
<div class="header"></div>
<input type="checkbox" class="openSideMenu" id="openSideMenu">
<label for="openSideMenu" class="sideIconToggle" onclick="openNav()">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sideMenu">
<ul class="sideMenuInner">
<li class="active">Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div>
I've tried to create an overlay layer and create a function connected to it, but the result is not valid.
Could you help me, please? Thanks in advance
Edit: here there is a demo
https://codepen.io/Clara83/pen/PoPVMgN

The whole animation of hide/show is based off CSS so you just need to toggle the checked property of the checkbox <input type="checkbox" class="openSideMenu" id="openSideMenu">
To solve the problem of detecting click outside you can wrap the sidebar in a div and then use contains property of event object that gets emitted from the element being clicked
function hideSidebar() {
document.getElementById('openSideMenu').checked = false;
}
var sideIconToggle = document.getElementById('sidebarContainer');
document.addEventListener('click', function(event) {
if (!sidebarContainer.contains(event.target))
hideSidebar();
});
html,
body {
overflow-x: hidden;
height: 100%;
}
body {
background: #fff;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: black;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div {
display: table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sideMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background: grey;
z-index: 1;
}
.sideMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid black;
}
.sideMenuInner li {
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid black;
}
.sideMenuInner li span {
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sideMenuInner li a {
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked~#sideMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sideIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked~.sideIconToggle>.horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked~.sideIconToggle>.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked~.sideIconToggle>.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
#sidenav-overlay {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 100%;
background: rgba(0, 0, 0, .1);
cursor: pointer;
z-index: 1;
}
<div class="header"></div>
<div id="sidebarContainer">
<input type="checkbox" class="openSideMenu" id="openSideMenu">
<label for="openSideMenu" class="sideIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sideMenu">
<ul class="sideMenuInner">
<li class="active" onclick="hideSidebar()">Item1</li>
<li onclick="hideSidebar()">Item2</li>
<li onclick="hideSidebar()">Item3</li>
</ul>
</div>
</div>

Problem with css animation: position relative and value for left doesn't work apparently together

Here's my problem:
I'm trying to animate a nav list (ul) and in my mind, I want to move it on click like that:
$('#top-nav-more').click(function() {
$('.hidden').toggleClass('hidden-click');
$(this).find('img').toggleClass('rotate');
});
/** Top Nav **/
#top-nav {
background: #e41a2e;
padding:0 !important;
display: inline-block;
/*height:40px;*/
}
.top-nav-wrapper{
max-width:1366px;
margin: 0 auto;
}
a.top-req-info{
position: absolute;
font-family: 'Daxline Light';
font-size: 0.80rem;
color: #FFF;
background: #cd1729;
padding: 10px 20px 11px 10px;
/* float: left; */
}
a.top-req-info:hover, #top-nav-book a:hover, .hidden a:hover {
text-decoration:none;
color: #821b31;
}
a.top-req-info:hover, #top-nav-book:hover {
background: #821b31;
color: white;
}
#top-nav-book:hover a {
color: white;
}
#top-nav-more a, #top-nav-no a, #top-nav-book a, .hidden a {
color: #FFF;
font-size: 0.80rem;
}
.rotate {
transform: rotate(180deg);
}
ul.top-nav-right{
list-style: none;
float: right;
display: inline;
margin: 7px 0;
}
ul.top-nav-right li{
display:inline;
padding: 8px 25px 8px;
}
li#top-nav-more{
background: #cd1729;
}
#top-nav-more img{
margin-right: 15px;
transition: 0.3s;
}
.hidden {
position: relative;
left: 321px;
display: none!important;
transition:all 1s linear;
}
.hidden-click {
transition:all 1s linear;
position: relative;
left: 0;
display: inline!important;
}
ul .hidden:first-child {
display: inline!important;
left: 0;
}
.search-bar input {
background-color: #821A31;
color: #ffff;
font-size: 35px;
border: 0;
margin: 0;
height: 76px;
width: 100%;
padding: 0 80px;
font-weight: 200;
display: none;
}
.search-bar input:focus, .search-bar input:focus{
outline: none;
}
.search-bar input.slide-down {
display: block;
}
.search-bar input::placeholder {
color: white;
}
.hover-bar {
background: #821A31!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Top Navigation -- Red bar -->
<div id="top-nav" class="container-fluid">
<div class="top-nav-wrapper">
<ul class="top-nav-right">
<li class="hidden">Health Care</li>
<li class="hidden">My Account</li>
<li class="hidden">Student Portal</li>
<li id="top-nav-more">More</li>
<li id="top-nav-no">Phone number</li>
<li id="top-nav-book">Book a Tour</li>
</ul>
</div>
</div>
Essentially, when you click more, the bar will change the position from some certain pixels to the left to 0 pixels on the left.
I added the transition effect to do it smoothly but for some reason, the effect happens right away. So technically it works but it doesn't work as I wish.
Something has to be wrong on my css transition. I read that it is possible to animate the position, so it is not a problem of position, it has to be something different. I've already use the property transition somewhere else in my code, so I have no clue of what is wrong, any idea?

This might get you close. I imagine there might be more to the animation you're looking for. It's hard to manipulate elements that are set to display none. Visibility: hidden and position: absolute is an equivalent you can manipulate:
/** Top Nav **/
#top-nav {
background: #e41a2e;
padding:0 !important;
display: inline-block;
/*height:40px;*/
}
.top-nav-wrapper{
max-width:1366px;
margin: 0 auto;
}
a.top-req-info{
position: absolute;
font-family: 'Daxline Light';
font-size: 0.80rem;
color: #FFF;
background: #cd1729;
padding: 10px 20px 11px 10px;
/* float: left; */
}
a.top-req-info:hover, #top-nav-book a:hover, .hidden a:hover {
text-decoration:none;
color: #821b31;
}
a.top-req-info:hover, #top-nav-book:hover {
background: #821b31;
color: white;
}
#top-nav-book:hover a {
color: white;
}
#top-nav-more a, #top-nav-no a, #top-nav-book a, .hidden a {
color: #FFF;
font-size: 0.80rem;
}
.rotate {
transform: rotate(180deg);
}
ul.top-nav-right{
list-style: none;
float: right;
display: inline;
margin: 7px 0;
}
ul.top-nav-right li{
display:inline;
padding: 8px 25px 8px;
}
li#top-nav-more{
background: #cd1729;
}
#top-nav-more img{
margin-right: 15px;
transition: 0.3s;
}
.hidden {
position: absolute;
left: 321px;
visibility: hidden;
transition:all 1s linear;
}
.hidden-click {
transition:all 1s linear;
position: relative;
left: 0;
visibility: visible;
}
ul .hidden:first-child {
display: inline!important;
left: 0;
}
.search-bar input {
background-color: #821A31;
color: #ffff;
font-size: 35px;
border: 0;
margin: 0;
height: 76px;
width: 100%;
padding: 0 80px;
font-weight: 200;
display: none;
}
.search-bar input:focus, .search-bar input:focus{
outline: none;
}
.search-bar input.slide-down {
display: block;
}
.search-bar input::placeholder {
color: white;
}
.hover-bar {
background: #821A31!important;
}
Working/semi-working example:
https://jsfiddle.net/qLpfynks/

I believe the reason is because you are switching from display:none to display: inline. CSS cannot transition display and so it will show the "transition" immediately.
To fix this and still achieve the desired effect change it to
.hidden {
position: relative;
left: 321px;
display: inline!important;
opacity:0; /*makes it invisible*/
transition:all 1s linear;
/*transition:left 1s linear*/
}
.hidden-click {
transition:all 1s linear;
/*transition:left 1s linear*/
position: relative;
left: 0;
opacity: 1; /*makes it visible*/
display: inline!important;
}
Note that if you use the specificier all for your transition you will see a fade in and out animation. If you don't want this, specify only left (see commented CSS code)

Click function never reading else statement to remove class

I have been stuck on a sliding down menu, but have made some headway with it. I had to modify a lot to make it work for both desktop and mobile viewports. The only thing I am stuck on now is getting the menu to close in a < 640px viewport.
In my snippet and jsfiddle below there is a lot of code, but the only code that really matters to this question is the javascript below:
$('#serviceClick').click( function () {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else {
$('#serviceNav').removeClass('activeSol').slideUp(500);
}
return false;
});
Basically my else statement is now removing the class 'activeSol` and then sliding up the selection.
In the mobile viewport, after clicking on "Solutions" the menu expands, but when you click on "Solutions" again, nothing happens.
It seems as if the variable relative is never reading as the class appended to it, making the click function run else. I did a simple console.log and the else never runs. I tried changing the click function to a change, but then the menu never triggers.
Does anyone see what is causing my else statement to not removeClass from serviceNav and slideUp?
JSfiddle link to see in mobile viewport.
$('#serviceClick').click( function () {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else {
$('#serviceNav').removeClass('activeSol').slideUp(500);
}
return false;
});
$('[data-pop-close]').on('click', function(e) {
//var targeted_pop = $(this).attr('data-pop-close');
$('#serviceNav').removeClass('activeSol');
$('body').css('overflow', 'auto');
e.preventDefault();
});
nav {
background: #FFF;
height: 70px;
width: 100%;
max-width: 100%;
box-shadow: 0px 6px 15px -4px rgba(0,0,0,0.12);
position: fixed;
top: 0;
z-index: 999;
box-sizing: border-box;
}
#nav-logo {
float: left;
height: 100%;
width: auto;
display: block;
position: relative;
margin-left: 5%;
}
#nav-logo img {
height: 80%;
width: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);-webkit-transform: translateY(-50%);
}
#mobile-button {
background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/menu.svg");
background-size: 30px 30px;
float: right;
width: 30px;
height: 30px;
margin-right: 5%;
margin-top: 15px;
cursor: pointer;
display: none;
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#mobile-button:hover {
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#nav-pop {
float: right;
display: block;
margin-right: 5%;
margin-top: 25px;
transition: ease 0.5s;-webkit-transition: ease 0.5s;
}
#nav-pop.active {
opacity: 1;
background: rgba(0,0,0,0.8);
background: #2f2f2f;
right: 0;
margin-top: 0;
margin-right: 0;
z-index: 999999;
transition: ease 0.6s;-webkit-transition: ease 0.6s;
transform: translateX(0);-webkit-transform: translateX(0);
box-shadow: -9px 0px 9px 1px rgba(0,0,0,.2);
}
#nav-list li {
display: inline-block;
margin: 0 17px;
vertical-align: top;
}
#nav-list li:first-child {
margin-left: 0px;
}
#nav-list li:last-child {
margin-right: 0px;
}
#nav-list li a, #serviceClick {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: .9rem;
color: #747678;
letter-spacing: 1px;
vertical-align: top;
transition: all .3s;-webkit-transition: all .3s;
cursor: pointer;
}
#nav-list li a:after, #serviceClick:after {
content: '';
display: block;
width: 0;
margin-top: 6px;
background: #b82222;
height: 2px;
transition: width .3s;
}
#nav-list li a:hover, #serviceClick:hover {
color: #4b4b4b;
transition: all .3s;-webkit-transition: all .3s;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
width: 100%;
transition: width .3s;
}
#nav-list li a.navInverse {
padding: 10px 12px;
border-radius: 2px;
box-sizing: border-box;
font-family: 'Muli', sans-serif;
font-size: 1.2rem;
color: #FFF;
border: 1px solid #b82222;
background: linear-gradient(to right bottom, #b82222, #a51e1e);
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
#nav-list li a.navInverse:hover {
background: #b82222;
background: #FFF;
color: #b82222;
/*transition: all 0s;-webkit-transition: all 0s;*/
}
#nav-list li a.navInverse:after {
content: '';
display: none;
width: 0px;
height: 0px;
transition: none;
}
#nav-pop-close {
display: none;
}
#nav-pop-close, #close-panel {
position: relative;
top: 3%;
left: 90%;
background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/icon_close.png");
background-size: 30px 30px;
background-repeat: no-repeat;
height: 30px;
width: 30px;
cursor: pointer;
}
/*- Service NAV -*/
#serviceNav {
width: 100%;
top: -40vh;
left: 0;
z-index: -1;
position: fixed;
background-color: rgba(0,0,0,0);
height: 40vh;
transition: all .4s;
padding: 20px 0;
}
#serviceNav.activeSol {
top: 0;
width: 100%;
background-color: rgba(0,0,0,.9);
z-index: 99999;
height: 40vh;
}
.popup-close {
position: absolute;
right: 12px;
top: 12px;
width: 32px;
height: auto;
}
#serviceNavInner {
margin: 0 5%;
height: 100%;
position: relative;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
width: 33%;
height: 100%;
border-right: 1px solid rgba(255,255,255,.5);
position: relative;
}
#serviceNavBlock1Wrap {
width: 80%;
text-align: left;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
width: 66.6%;
height: 100%;
margin: 10px auto;
position: relative;
}
.servNavItemWrap {
display: inline-block;
vertical-align: top;
width: 25%;
margin-bottom: 50px;
text-align: center;
cursor: pointer;
-webkit-backface-visibility: hidden;
}
.servNavItemWrap img {
width: 75px;
height: 75px;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover img {
-webkit-transition: all 0.25s;transition: all 0.25s;
-webkit-transform: scale(1.1);transform: scale(1.1);
-webkit-backface-visibility: hidden;
}
.servNavItemWrap a {
text-decoration: none;
outline: none;
box-sizing: border-box;
}
.servNavItemTitle {
margin-top: 5px;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover .servNavItemTitle {
color: #FFF;
-webkit-transition: all 0.25s;transition: all 0.25s;
}
/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/
#media screen and (max-width:640px) {
#mobile-button {
display: block;
}
#nav-pop {
float: none;
opacity: 0;
position: fixed;
margin-top: 0;
width: 75%;
right: -100%;
height: 100vh;
transform: translateX(100%);-webkit-transform: translateX(100%);
}
#nav-pop-close {
display: block;
background-size: 20px 20px;
height: 20px;
width: 20px;
}
#nav-list {
margin-top: 20px;
}
#nav-list li {
display: block;
position: relative;
width: 100%;
margin: 0;
padding: 20px 10%;
background: linear-gradient(to bottom right, #151515, #2f2f2f);
background: #2f2f2f;
text-align: left;
cursor: pointer;
border-bottom: .3px solid #FFF;
}
#quoteButton {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
#nav-list li:hover #quoteButton {
background: #2f2f2f;
}
#nav-list li:hover, #nav-list li:active {
background: #000;
}
#nav-list li:first-child {
margin-left: 0;
}
#nav-list li:last-child {
margin: 20px auto;
text-align: center;
border-bottom: none;
background: #2f2f2f;
padding: 20px 0;
}
#nav-list li a, #serviceClick {
font-family: 'Nunito', sans-serif;
font-size: .8rem;
color: #FFF;
letter-spacing: .3rem;
}
#nav-list li a:after, #serviceClick:after {
display: none;
}
#nav-list li a:hover, #serviceClick:hover {
color: #FFF;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
width: 0%;
}
/*- Service NAV -*/
#serviceNav {
width: 100%;
z-index: 1;
position: relative;
background-color: rgba(0,0,0,0);
height: 200px;
transition: all .4s;
padding: 10px 0;
display: none;
top: 0;
}
#serviceNav.activeSol {
background-color: #000;
z-index: 9999999;
height: auto;
min-height: 20%;
top: 0;
border-bottom: .01em solid #FFF;
}
.popup-close {
display: none;
}
#serviceNavInner {
margin: 0 2.5%;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
width: 100%;
height: 50px;
border-right: none;
display: block;
position: relative;
}
#serviceNavBlock1Wrap {
width: 100%;
text-align: center;
}
#navOverviewT, #navOverviewP {
display: none;
}
#solOverviewB {
font-size: .7rem;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
width: 100%;
height: 100%;
margin: 10px auto;
display: block;
}
.servNavItemWrap {
display: inline-block;
width: 25%;
margin-bottom: 15px;
}
.servNavItemWrap img {
width: 30px;
height: 30px;
}
.servNavItemTitle {
margin-top: 5px;
font-size: .5rem;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
<div id="nav-logo">
</div>
<div id="mobile-button"><img src="" class="hidden" alt=""></div>
<div id="nav-pop">
<div id="nav-pop-close"></div>
<ul id="nav-list">
<li>ABOUT</li>
<li id="serviceClick">SOLUTIONS</li>
<div id="serviceNav">
<div id="serviceNavInner">
<div id="serviceNavBlock1" class="iblock">
<button class="buttonInv2" id="solOverviewB">Solutions Overview</button>
</div><div id="serviceNavBlock2" class="iblock">
</div>
</div>
</div>
<li>LEARN</li>
<li>CONTACT</li>
<li>REQUEST QUOTE</li>
</ul>
</div>
</nav>

var relative = $(this);
Is picking the serviceClick list item (li) and then you are checking
if (!relative.hasClass('activeSol')) {
but you never added the class to the li, instead you added it to the div #serviceNav.
I think changing
if (!relative.hasClass('activeSol')) {
to
if (!$('#serviceNav').hasClass('activeSol')) {
should work.

Your shouldn't check for $("#serviceClick") for class activeSol, should check on $("#serviceNav") instead.
if (!$('#serviceNav').hasClass('activeSol')) {
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else {
$('#serviceNav').removeClass('activeSol').slideUp(500);
}

relative doesn't have the class 'activeSol' and will never have it, in order to have it toggle the visibility of your menu, you should add and remove classes to it, like this:
$('#serviceClick').click( function () {
var relative = $(this);
if (!relative.hasClass('opened')) { // if it's not opened
relative.addClass('opened'); // open it
$('#serviceNav').removeClass('activeSol');
$('#serviceNav').addClass('activeSol').slideDown();
} else { // if it's opened
relative.removeClass('opened'); // close it
$('#serviceNav').removeClass('activeSol').slideUp(500);
}
return false;
});