I would like to change my navigation from the transparent background to a white background. The navigation should decrease in size and the logo should disappear.
It should look exactly like on this page: https://www.praxis-loeber.de
I have already written jquery code for it but unfortunately it still doesn't work.
I would be very happy if someone could show me where the error lies in my code.
Here is my code:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 10) {
$(".navigation").addClass("transparent");
$(".hr").hide();
$(".header-logo-container").hide();
$("a").css("color", "black");
} else {
$(".navigation").removeClass("transparent");
$(".hr").show();
$(".header-logo-container").show();
$("a").css("color", "white")
}
});.header {
height: 820px;
background-image: url("../img/beispiel.png");
background-size: cover;
}
.header-unterseite {
height: 500px;
background-image: url("../img/beispiel.png");
background-size: cover;
}
.navigation {
position: sticky;
top: 0px;
}
.navigation.transparent {
background-color: white;
}
.header-logo-container {
text-align: center;
@media(max-width: 950px) {
display: none;
}
}
.header-logo {
width: 11%;
margin-top: 20px;
}
.header-navbar-links {
float: left;
font-family: 'Open Sans', bold;
margin-top: -50px;
font-size: 100%;
margin-left: 150px;
@media(max-width: 950px) {
display: none;
}
}
.header-navbar-links li {
float: right;
list-style-type: none;
margin-right: 26px;
}
.header-navbar-links a {
text-decoration: none;
color: rgb(255, 255, 255);
}
.header-navbar-links a:hover {
color: #88c602;
}
.header-navbar-rechts {
color: white;
float: right;
margin-top: -50px;
font-family: 'Open Sans', bold;
font-size: 100%;
margin-right: 150px;
@media(max-width: 950px) {
display: none;
}
}
.header-navbar-rechts li {
float: left;
list-style-type: none;
margin-right: 26px;
}
.header-navbar-rechts a {
text-decoration: none;
color: rgb(255, 255, 255);
}
.header-navbar-rechts a:hover {
color: #88c602;
}
.footer-hr {
color: rgb(255, 255, 255);
width: 100%;
height: 5px;
@media(max-width: 950px) {
display: none;
}
}
.slogan {
color: rgb(255, 255, 255);
text-align: center;
font-family: 'Ubuntu', regular;
font-size: 450%;
margin-top: 84px;
-webkit-animation: fadein 2s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s;
/* Firefox < 16 */
-ms-animation: fadein 2s;
/* Internet Explorer */
-o-animation: fadein 2s;
/* Opera < 12.1 */
animation: fadein 2s;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.description {
background-color: #88c602;
text-align: center;
color: rgb(255, 255, 255);
font-family: 'Ubuntu', regular italic;
font-size: 200%;
padding-top: 27px;
padding-bottom: 27px;
}
.description-title {
font-size: 180%;
margin-top: -15px;
}
#side-menu-trigger {
float: right;
color: rgb(255, 255, 255);
margin-top: 35px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 25px;
padding-left: 25px;
font-size: 200%;
height: inherit;
@media(min-width: 950px) {
display: none;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="side-menu" style="display: none;">
<h3>Navigation</h3>
<ul class="side-menu-navigation">
<?php require (__DIR__ . "/navigation- links.php"); ?>
<?php require (__DIR__ . "/navigation-rechts.php") ?>
</ul>
</div>
<header class="header">
<div class="navigation">
<div class="header-logo-container">
<a href="index.php"><img src="img/Logo_Petra.png" class="header-logo" alt="Logo"></a>
</div>
<nav class="header-navbar">
<ul class="header-navbar-links">
<?php require (__DIR__ . "/navigation-links.php"); ?>
</ul>
<ul class="header-navbar-rechts">
<?php require (__DIR__ . "/navigation-rechts.php"); ?>
</ul>
<button id="side-menu-trigger">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
</nav>
<div class="hr">
<hr class="footer-hr" />
</div>
</div>
<div class="container" onload="document.getElementById(slogan).style.opacity='1'">
<div class="slogan">
Herzlich Willkommen in der<br> Praxis für Sprachtherapie<br> Petra Daase-Beck
</div>
</div>
</header>
<div class="description">
<div class="description-title"><strong>Wortstark</strong></div>
in Sprache und Schrift für Kinder - Jugendliche<br> und Erwachsene
</div>
