Develop Reference

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

How do I disable temporarily the hover of a div?

I'm making a webpage. I created a popup that when I hover the div, the popup opens and if not, it closes.
I want to make a function that if I click on the div, the popup stay open without hover. How I can do? Thanks in advance.
I have this code:
HTML:
<div class="password-lost-tooltip" onclick="blockTooltip()">Lost password?
<span class="password-lost-tooltiptext" id="lostpasswordtooltip">LOL</span>
</div>
CSS:
.password-lost-tooltip {
position: relative;
display: inline-block;
position: fixed;
top: 55px;
left: 380px;
font-family: 'Nunito', sans-serif;
font-size: 15;
text-decoration: none;
transition-duration: 0.3s;
color: grey;
}
.password-lost-tooltip:hover {
color: black;
cursor: pointer;
}
.password-lost-tooltip .password-lost-tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: fixed;
top: 49px;
left: 610px;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.password-lost-tooltip .password-lost-tooltiptext::after {
content: "";
position: fixed;
transform: rotate(90deg);
top: 57.5px;
left: 542.5px;
margin-left: -5px;
border-width: 6px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.password-lost-tooltip:hover .password-lost-tooltiptext {
visibility: visible;
opacity: 1;
}

You can use onClick and onBlur events to set or remove a class on the div which then should be added to the css to control the visibility.
Please checkout this running example:
function blockTooltip () {
document.querySelector('.password-lost-tooltip').classList.add('showTip');
}
function hideTooltip () {
document.querySelector('.password-lost-tooltip').classList.remove('showTip');
}
.password-lost-tooltip {
position: relative;
display: inline-block;
position: fixed;
top: 55px;
left: 380px;
font-family: 'Nunito', sans-serif;
font-size: 15;
text-decoration: none;
transition-duration: 0.3s;
color: grey;
}
.password-lost-tooltip:hover {
color: black;
cursor: pointer;
}
.password-lost-tooltip .password-lost-tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: fixed;
top: 49px;
left: 610px;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.password-lost-tooltip .password-lost-tooltiptext::after {
content: "";
position: fixed;
transform: rotate(90deg);
top: 57.5px;
left: 542.5px;
margin-left: -5px;
border-width: 6px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.password-lost-tooltip:hover .password-lost-tooltiptext {
visibility: visible;
opacity: 1;
}
.password-lost-tooltip.showTip .password-lost-tooltiptext {
visibility: visible;
opacity: 1;
}
<div class="password-lost-tooltip" tabindex="0"
onclick="blockTooltip()" onblur="hideTooltip()">Lost password?
<span class="password-lost-tooltiptext" id="lostpasswordtooltip">LOL</span>
</div>

Add/Remove class to get a menu to display

I started programming the mobile version of my nav menu earlier. I had to rework my #serviceNav to get it to work in a mobile setting. When doing this I changed my javascript from this:
/*$('#serviceClick').click( function () {
$('#serviceNav').addClass('activeSol');
});*/
$('[data-pop-close]').on('click', function(e) {
//var targeted_pop = $(this).attr('data-pop-close');
$('#serviceNav').removeClass('active');
$('body').css('overflow', 'auto');
e.preventDefault();
});
To this:
$('#serviceClick').click(function() {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('.activeSol').removeClass('activeSol').next('#serviceNav').slideUp(500);
relative.addClass('activeSol').next('#serviceNav').slideDown();
//$('.infoTitles:before').addClass('opened');
} else {
relative.removeClass('activeSol').next('#serviceNav').slideUp(500);
}
return false;
});
The issue that I am having now that I previously didn't with my javascript code is that now my desktop media query version of my #serviceNav is not displaying, however it does display and function in the mobile setting. The trigger for this menu is the menu item called "Solutions". You can see that in a media query over 640px that nothing happens, but 640px or less it applies the fadeDown function.
Does anyone see why this is not working for the larger version media query?
Here is a jsfiddle
Full code:
$('#mobile-button').on('click', function () {
$('#nav-pop').addClass('active');
$('html').addClass('is-navOpen');
});
/*$('#serviceClick').click( function () {
$('#serviceNav').addClass('activeSol');
});*/
$('#serviceClick').click(function() {
var relative = $(this);
if (!relative.hasClass('activeSol')) {
$('.activeSol').removeClass('activeSol').next('#serviceNav').slideUp(500);
relative.addClass('activeSol').next('#serviceNav').slideDown();
} else {
relative.removeClass('activeSol').next('#serviceNav').slideUp(500);
}
return false;
});
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>

There is a lot going on here and frankly, it's hard to decipher but I think "Nothing happens" is relative. When inspecting the element in dev console you can see the Javascript styling is being added appropriately. So something is happening, it's simply happening off screen because you've told it to. I think the culprit here, is the >640px positioning of your #serviceNav element is maintained at top: -40vh; That's a lot. When removing this value the button displays as follows:
Note: you will have to change some other things around as this displays it on page load. But you get the idea

Change text colour based on background

I have a CTA that slides out when you hover over it. The problem I have is that the text is sometimes hard to read depending on the background colour. I've created a demo of what I'm trying to achieve, you can check it out here:
Demo on CodePen
The essence of this demo is:
HTML:
<div class="at-about-fab">
<div class="at-about-fab__thumbnail">
<img alt="Fiat Professional" src="https://fiatprofessionaleastlondon.co.za/wp-content/uploads/2018/02/CallUs.png" />
</div>
<div class="at-about-fab__meta">
<h2>Call Us Now</h2>
<p>555 555 5555</p>
</div>
</div>
The CSS looks like this:
.at-about-fab {
z-index: 999999;
position: fixed;
right: 20px;
bottom: 20px;
display: flex;
align-items: center;
flex-direction: row;
transform: translateX(100%);
transition: 0.2s ease;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&:before {
content: "";
position: absolute;
display: block;
top: 50%;
left: -58px;
width: 58px;
height: 48px;
transform: translateY(-50%);
}
&:hover {
transform: translateX(0%);
.at-about-fab__meta {
opacity: 1;
}
}
&__thumbnail {
position: absolute;
top: 50%;
left: -58px;
background: #FFFFFF;
width: 48px;
height: 48px;
border: 1px solid #EEEEEE;
border-radius: 100%;
padding: 4px;
box-sizing: border-box;
transform: translateY(-50%);
overflow: hidden;
cursor: pointer;
img {
display: block;
width: 100%;
border-radius: 100%;
}
}
&__meta {
font-family: 'Open Sans', sans-serif;
opacity: 0;
transition: 0.2s ease;
h2,
p {
margin: 0;
padding: 0;
}
h2 {
color: #444444;
font-size: 14px;
font-weight: 600;
}
p {
color: #CCCCCC;
font-size: 12px;
font-weight: 400;
}
a {
color: inherit;
font-weight: 400;
text-decoration: none;
}
}
}
Any suggestions on how to get this right? I've looked at a few JavaScript-based examples but my JavaScript skills aren't there yet...
Many thanks

You can try something like this:
Idea
Add mouseover event on main container.
In this handler, have a variable that will hold classname that is to be added.
On hover:
Get all sections.
Check the bounds of current section with icon's bound.
If top of icon is greater than top of section, update the className variable
If not, break the loop.
Now remove all classes add className to container. You will also have to write corresponding classes in CSS as well.
Sample: Updated CodePen
var iconContainer = document.querySelector('.at-about-fab');
iconContainer.addEventListener('mouseover', function () {
var bounds = this.getBoundingClientRect();
var sections = document.querySelectorAll('.section');
var className = '';
Array.from(sections).some(function(el) {
var currentBounds = el.getBoundingClientRect();
if(bounds.top > currentBounds.top) {
className = el.getAttribute('id');
}
else {
return true;
}
});
this.classList.remove('section1', 'section2', 'section3', 'section4');
this.classList.add(className);
})

It is not advisable to share offsite links that might be erased however this is a good start. 7 Practical Tips for Cheating at Design
Summary has been done in the comments to the CSS.
.at-about-fab {
z-index: 999999;
position: fixed;
/*Dropped the right to hide the text block a little more - you can ignore*/
right: 0px;
bottom: 20px;
/*Add a background that best blends. White is not a bad option as allows many with eye issues read the text behind. Add a little padding*/
background-color: white;
padding: 5px 20px;
display: flex;
align-items: center;
flex-direction: row;
transform: translateX(100%);
transition: 0.2s ease;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&:before {
content: "";
position: absolute;
display: block;
top: 50%;
left: -58px;
width: 58px;
height: 48px;
transform: translateY(-50%);
}
&:hover {
transform: translateX(0%);
.at-about-fab__meta {
opacity: 1;
}
}
&__thumbnail {
position: absolute;
top: 50%;
left: -58px;
background: #FFFFFF;
width: 48px;
height: 48px;
border: 1px solid #EEEEEE;
border-radius: 100%;
padding: 4px;
box-sizing: border-box;
transform: translateY(-50%);
overflow: hidden;
cursor: pointer;
img {
display: block;
width: 100%;
border-radius: 100%;
}
}
&__meta {
font-family: 'Open Sans', sans-serif;
opacity: 0;
transition: 0.2s ease;
h2,
p {
margin: 0;
padding: 0;
}
h2 {
color: #444444;
font-size: 14px;
font-weight: 600;
}
p {
/*It is advisable not to go so off color. So lighter grey of the #444 you used is a better option so I went for #999 */
color: #999;
font-size: 12px;
font-weight: 400;
}
a {
color: inherit;
font-weight: 400;
text-decoration: none;
}
}
}
/* Just for the sake of testing */
.content{
position:relative;
}
#wrapper
{
position:relative;
}
.section
{
width: 100%;
text-align:center;
padding:250px 0;
border:1px solid #666;
}
#section1
{
background: #fff;
}
#section2
{
background: #000;
color:#fff;
}
#section3
{
background: #444444;
}
#section4
{
background: #BA2322;
}
Codepen Demo

You could use mix-blend-mode: exclusion; with the help from data attribute and ::after selector:
.at-about-fab {
z-index: 999999;
position: fixed;
right: 20px;
bottom: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: 0.2s ease;
transition: 0.2s ease;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.at-about-fab:before {
content: "";
position: absolute;
display: block;
top: 50%;
left: -58px;
width: 58px;
height: 48px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.at-about-fab:hover {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.at-about-fab:hover .at-about-fab__meta {
opacity: 1;
}
.at-about-fab__thumbnail {
position: absolute;
top: 50%;
left: -58px;
background: #FFFFFF;
width: 48px;
height: 48px;
border: 1px solid #EEEEEE;
border-radius: 100%;
padding: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
overflow: hidden;
cursor: pointer;
}
.at-about-fab__thumbnail img {
display: block;
width: 100%;
border-radius: 100%;
}
.at-about-fab__meta {
font-family: 'Open Sans', sans-serif;
opacity: 0;
-webkit-transition: 0.2s ease;
transition: 0.2s ease;
}
.at-about-fab__meta h2,
.at-about-fab__meta p {
margin: 0;
padding: 0;
}
.at-about-fab__meta h2 {
color: #444444;
font-size: 14px;
font-weight: 600;
}
.at-about-fab__meta p {
color: #CCCCCC;
font-size: 12px;
font-weight: 400;
}
.at-about-fab__meta a {
color: inherit;
font-weight: 400;
text-decoration: none;
}
/* Just for the sake of testing */
.content {
position: relative;
}
#wrapper {
position: relative;
}
.section {
width: 100%;
text-align: center;
padding: 250px 0;
border: 1px solid #666;
position: relative;
color: black;
}
.section:after {
content: attr(data-content);
position: absolute;
width: 100%;
height: auto;
text-align: center;
top: 50%;
left: 0;
mix-blend-mode: exclusion;
color: white;
}
#section1 {
background: #fff;
}
#section2 {
background: #000;
}
#section3 {
background: #444444;
}
#section4 {
background: #BA2322;
}
<!-- Credits -->
<!-- Developer - Andy Tran (https://andytran.me) -->
<!-- Design - Andy Tran (https://andytran.me) -->
<div class="at-about-fab">
<div class="at-about-fab__thumbnail">
<img alt="Fiat Professional" src="https://fiatprofessionaleastlondon.co.za/wp-content/uploads/2018/02/CallUs.png" />
</div>
<div class="at-about-fab__meta">
<h2>Call Us Now</h2>
<p>555 555 5555</p>
</div>
</div>
<!-- Just for the sake of testing -->
<div class="content">
<div id="wrapper">
<div class="section" id="section1" data-content="section1"></div>
<div class="section" id="section2" data-content="section2"></div>
<div class="section" id="section3" data-content="section3"></div>
<div class="section" id="section4" data-content="section4"></div>
</div>
</div>
Here is also a link to the updated codepen with SCSS.

onclick for closing cookie bar

i'm developing an app that should show a cookie bar and if the user click on the "X" it should to close, i've thinked to do it with the onclick attribute but it is ignored.
This is my code:
console.log("Ready !");
var close = function () {
console.log("close");
}
.cookie-bar {
position: fixed;
width: 100%;
top: 0;
right: 0;
left: 0;
height: 30px;
text-align: center;
line-height: 30px;
background-color: #800000;
color: white;
font-size: 14px;
font-family: "Lato", sans-serif;
font-weight: 100;
transition: .8s;
animation: slideIn .8s;
animation-delay: .8s;
.message {
white-space: nowrap;
text-shadow: 0 1px 0 darken(red, 10%);
#media (max-width: 767px){
display: none;
}
}
.mobile {
display: none;
#media (max-width: 767px){
display: inline-block;
}
}
}
#keyframes slideIn {
0% {
transform: translateY(-50px);
}
100% {
transform: translateY(0);
}
}
.close-cb {
border: none;
color: white;
background: darken(red, 20%);
position: absolute;
display: inline-block;
right: 10px;
top: 0;
cursor: pointer;
border-radius: 3px;
box-shadow: inset 0 0 3px 0 rgba(0,0,0,.2);
line-height: 30px;
height: 30px;
width: 30px;
font-size: 16px;
font-weight: bold;
&:hover {
background: darken(red, 10%);
}
}
.checkbox-cb {
display: none;
&:checked + .cookie-bar {
transform: translateY(-50px);
}
}
<input class="checkbox-cb" id="checkbox-cb" type="checkbox" onclick="close()"/>
<div class="cookie-bar" id="cookie">
<span class="message">Questo sito utilizza i cookies</span>
<label for="checkbox-cb" class="close-cb" >x</a>
</div>
Can i solve it?
Thank's