[Lukexm]

Hey Erika,

the post that I talked about is in draft mode but I can post the css I used.

The child theme's css for this specific post:

@media only screen and (max-width: 1023px) {

.postid-5454 #genesis-mobile-nav-primary {
background-color: #transparent;
color: #fff;
}
}

@media only screen and (min-width: 1023px) { .postid-5454 .content {
width: 950px;
}
}

@media only screen and (min-width: 1023px) { .postid-5454 .entry-content { color: #333 !important; font-family: 'Lora', serif !important;font-size: 20px !important; padding-left: 125px !important; padding-right: 125px !important; }
}
.postid-5454 .full-width-content.featured-image .site-inner { margin-top: 0px !important; }
.postid-5454 .entry-header { margin-bottom: 200px !important; }
.postid-5454 .site-inner { background: transparent !important; }
.postid-5454 h1 {
color: #fff !important;

}
.postid-5454 h1.entry-title { font-size: 45px;
font-size: 4.5rem;
font-weight: 600 !important;
letter-spacing: normal;
text-transform: uppercase;;

}
.postid-5454 .entry-header .entry-categories a { color: #fff;font-family: Helvetica Neue !important; font-weight: 500;background-color: #000; padding:8px 16px ;letter-spacing: 1px;font-size:14px }
.postid-5454 .entry-categories { margin-bottom: 20px; }
.postid-5454 .entry-meta a { color: #fff; }
.postid-5454 .entry-header::after {
border-bottom: 0.5px solid #fff;
width: 5%; }

.postid-5454 .site-header {
background-color: transparent !important;
border-bottom: 0.5px solid transparent;
min-height: 80px;
padding: 10px 40px;
top: 0;
width: 100%;
z-index: 9999;
}
.postid-5454 .site-header { background-color: #000 !important;
width: 100%;
z-index: 999; }
}

@media only screen and (max-width: 600px) {
.postid-5454 h1.entry-title { font-size: 45px;
font-size: 3rem;
font-weight: 600 !important;
letter-spacing: normal;
text-transform: uppercase;;

}
}

And here's the custom html and css for the plugin:
(I used “genesis_after_header" as the position)

<div style="margin-bottom: -525px;margin-top: -150px;" class="blogimage blogheader"> </div>

.blogimage { background-image: url("https://strongerr.de/wp-content/uploads/2018/03/red-only.jpg"); padding-top:80px; padding-bottom:150px; padding-left:15px; padding-right:15px;margin: 0 auto;height:600px;background-color: rgba(0, 0, 0, 0.2);background-size: cover; }

@media only screen and (max-width: 600px) { .blogimage { margin-top: -100px;height:500px;padding-bottom: 200px; } }

The navigation should be transparent on mobile and when you open it, it should be dark. I hope you know what I mean 😀
If that's not possible the navigation will stay dark all the time - I hope that I can do this by myself.

[Author]

Posts