How can I invert the text on my navbar when the color of an element below it is the same color? I tried using the filter function in css, but that seems to just permanently invert the color. I have also went onto a few other SO osts but they dont seem to work.
Here is a code snippet:
/** @format */
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px #000000;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #5c5b5b;
border-radius: 5px;
transition: background-color 0.15s linear;
}
::-webkit-scrollbar-thumb:hover {
background-color: #2e2e2e;
cursor: grab;
}
::-webkit-scrollbar-thumb:active {
cursor: grabbing;
}
.main-hero {
box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.5);
}
body {
font-size: 17px;
font-weight: 400;
color: #eeeeee !important;
font-family: "Poppins", sans-serif;
background: #1a1a1a !important;
scroll-behavior: smooth;
}
.navbar {
margin: 10px;
}
.navbar .nav-link {
position: relative;
text-decoration: none;
color: rgba(255, 255, 255, 1);
transition: color 0.15 ease-in-out;
}
.navbar .nav-link:hover {
color: blue;
}
.navbar .nav-link::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 3px;
background-color: blue;
transition: width 0.15s ease;
transform: translateX(-50%);
}
.navbar .nav-link:hover::before {
width: 100%;
}
.rules-btn {
position: relative;
border: 2px solid blue !important;
border-radius: 10px;
color: #ffffff;
text-decoration: none;
font-weight: 400;
padding: 5px !important;
cursor: pointer;
font-size: 15px;
height: 100%;
width: 70px;
transition: border-color linear 0.15s, color linear 0.15s;
}
.rules-btn:hover {
border-color: red !important;
color: red;
}
/*main section*/
.main-heading {
font-size: 90px;
}<!-- @format -->
<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="The official website for Cratex SMP" />
<meta name="author" content="Cratex SMP" />
<meta name="generator" content="Hugo 0.122.0" />
<title>Cratex SMP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous" />
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<link href="assets/css/style.css" rel="stylesheet" />
</head>
<body class="h-100 text-center">
<header>
<nav class="navbar navbar-expand-sm navbar-dark fixed-top mb-auto">
<div class="container-fluid">
<a class="navbar-brand nav-link" href="index.html">Cratex SMP</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarCollapse"
aria-controls="navbarCollapse"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="active mx-1 py-1 nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="mx-1 py-1 nav-link" href="#">Support</a>
</li>
<li class="nav-item">
<a class="mx-1 py-1 nav-link" href="https://store.cratexsmp.com">Store</a>
</li>
<li class="nav-item">
<a
style="mix-blend-mode: difference"
class="text-decoration-none mx-1 py-1 d-inline-block rules-btn"
href="rules.html"
>Rules</a
>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div>
<br>
<br>
<br>
<br>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt, nam aspernatur delectus optio quos eveniet
repudiandae culpa quo esse corporis similique accusamus cum nobis officia totam doloremque? Laudantium, corporis
dicta. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis illo, ea possimus, aspernatur est,
impedit natus dolores ipsam eveniet autem maxime sit accusamus doloremque quo veritatis corporis nemo totam
similique error animi deleniti porro modi aut iste necessitatibus tempore et eligendi dolorum, esse omnis sequi
veritatis quas maxime officiis incidunt. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt, nam
aspernatur delectus optio quos eveniet repudiandae culpa quo esse corporis similique accusamus cum nobis officia
totam doloremque? Laudantium, corporis dicta. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis
illo, ea possimus, aspernatur est, impedit natus dolores ipsam eveniet autem maxime sit accusamus doloremque quo
veritatis corporis nemo totam cupiditate! Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
natus dolor inventore nulla voluptate sunt eaque, vero odit perferendis. Dolores eius soluta maxime, perferendis
provident sit obcaecati asperiores quasi inventore. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Corporis aliquam, omnis fugiat exercitationem vitae accusantium, aspernatur earum quam blanditiis tempore a
delectus sunt id ullam praesentium, natus eveniet soluta mollitia. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Ratione, veniam libero qui deleniti blanditiis repudiandae autem. Inventore nobis, nemo
accusamus sit, cum, praesentium perspiciatis excepturi animi earum voluptatum ab laudantium? Lorem ipsum, dolor
sit amet consectetur adipisicing elit. Laudantium libero sunt nihil corrupti quisquam a illum labore similique
soluta quia voluptatem repellat necessitatibus autem ut quos harum accusamus, earum repudiandae. Lorem ipsum,
dolor sit amet consectetur adipisicing elit. Expedita sunt veniam sed optio cum sequi, id error quis ab aliquam
non iste molestiae obcaecati maxime fugiat ut eius incidunt? Veniam. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Voluptas possimus ex consectetur ipsam alias, aperiam labore doloremque placeat perferendis
quisquam numquam at earum dolorem deleniti libero! Magni non explicabo aspernatur! Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Iusto similique error animi deleniti porro modi aut iste necessitatibus tempore et
eligendi dolorum, esse omnis sequi veritatis quas maxime officiis incidunt. Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Deserunt, nam aspernatur delectus optio quos eveniet repudiandae culpa quo esse
corporis similique accusamus cum nobis officia totam doloremque? Laudantium, corporis dicta. Lorem ipsum dolor,
sit amet consectetur adipisicing elit. Blanditiis illo, ea possimus, aspernatur est, impedit natus dolores ipsam
eveniet autem maxime sit accusamus doloremque quo veritatis corporis nemo totam cupiditate! Lorem ipsum dolor sit
amet consectetur adipisicing elit. Temporibus natus dolor inventore nulla voluptate sunt eaque, vero odit
perferendis. Dolores eius soluta maxime, perferendis provident sit obcaecati asperiores quasi inventore. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Corporis aliquam, omnis fugiat exercitationem vitae
accusantium, aspernatur earum quam blanditiis tempore a delectus sunt id ullam praesentium, natus eveniet soluta
mollitia. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, veniam libero qui deleniti blanditiis
repudiandae autem. Inventore nobis, nemo accusamus sit, cum, praesentium perspiciatis excepturi animi earum
voluptatum ab laudantium? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laudantium libero sunt nihil
corrupti quisquam a illum labore similique soluta quia voluptatem repellat necessitatibus autem ut quos harum
accusamus, earum repudiandae. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita sunt veniam sed
optio cum sequi, id error quis ab aliquam non iste molestiae obcaecati maxime fugiat ut eius incidunt? Veniam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas possimus ex consectetur ipsam alias, aperiam
labore doloremque placeat perferendis quisquam numquam at earum dolorem deleniti libero! Magni non explicabo
aspernatur! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto similique error animi deleniti porro
modi aut iste necessitatibus tempore et eligendi dolorum, esse omnis sequi veritatis quas maxime officiis
incidunt. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt, nam aspernatur delectus optio quos
eveniet repudiandae culpa quo esse corporis similique accusamus cum nobis officia totam doloremque? Laudantium,
corporis dicta. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis illo, ea possimus, aspernatur
est, impedit natus dolores ipsam eveniet autem maxime sit accusamus doloremque quo veritatis corporis nemo totam
cupiditate! Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus natus dolor inventore nulla
voluptate sunt eaque, vero odit perferendis. Dolores eius soluta maxime, perferendis provident sit obcaecati
asperiores quasi inventore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis aliquam, omnis
fugiat exercitationem vitae accusantium, aspernatur earum quam blanditiis tempore a delectus sunt id ullam
praesentium, natus eveniet soluta mollitia. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione,
veniam libero qui deleniti blanditiis repudiandae autem. Inventore nobis, nemo accusamus sit, cum, praesentium
perspiciatis excepturi animi earum voluptatum ab laudantium? Lorem ipsum, dolor sit amet consectetur adipisicing
elit. Laudantium libero sunt nihil corrupti quisquam a illum labore similique soluta quia voluptatem repellat
necessitatibus autem ut quos harum accusamus, earum repudiandae. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Expedita sunt veniam sed optio cum sequi, id error quis ab aliquam non iste molestiae obcaecati
maxime fugiat ut eius incidunt? Veniam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas possimus
ex consectetur ipsam alias, aperiam labore doloremque placeat perferendis quisquam numquam at earum dolorem
deleniti libero! Magni non explicabo aspernatur! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto
similique error animi deleniti porro modi aut iste necessitatibus tempore et eligendi dolorum, esse omnis sequi
veritatis quas maxime officiis incidunt. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt, nam
aspernatur delectus optio quos eveniet repudiandae culpa quo esse corporis similique accusamus cum nobis officia
totam doloremque? Laudantium, corporis dicta. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis
illo, ea possimus, aspernatur est, impedit natus dolores ipsam eveniet autem maxime sit accusamus doloremque quo
veritatis corporis nemo totam cupiditate! Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
natus dolor inventore nulla voluptate sunt eaque, vero odit perferendis. Dolores eius soluta maxime, perferendis
provident sit obcaecati asperiores quasi inventore. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Corporis aliquam, omnis fugiat exercitationem vitae accusantium, aspernatur earum quam blanditiis tempore a
delectus sunt id ullam praesentium, natus eveniet soluta mollitia. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Ratione, veniam libero qui deleniti blanditiis repudiandae autem. Inventore nobis, nemo
accusamus sit, cum, praesentium perspiciatis excepturi animi earum voluptatum ab laudantium? Lorem ipsum, dolor
sit amet consectetur adipisicing elit. Laudantium libero sunt nihil corrupti quisquam a illum labore similique
soluta quia voluptatem repellat necessitatibus autem ut quos harum accusamus, earum repudiandae. Lorem ipsum,
dolor sit amet consectetur adipisicing elit. Expedita sunt veniam sed optio cum sequi, id error quis ab aliquam
non iste molestiae obcaecati maxime fugiat ut eius incidunt? Veniam. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Voluptas possimus ex consectetur ipsam alias, aperiam labore doloremque placeat perferendis
quisquam numquam at earum dolorem deleniti libero! Magni non explicabo aspernatur! Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Iusto similique error animi deleniti porro modi aut iste necessitatibus tempore et
eligendi dolorum, esse omnis sequi veritatis quas maxime officiis incidunt.
</div>
<footer class="mt-auto text-white-50">
<p class="mb-0">Copyright - Cratex SMP 2024</p>
</footer>
</body>
</html>Any help is apreciated!