Header Menu Overlay

  • Resolved livetoerr

    (@livetoerr)


    8 years, 8 months ago

    In the header menu, how do I get the overlay to be the size of the feature image? It changes size when you add a logo, but I’d like it to actually cover my entire feature image.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Kathryn Presner

    (@zoonini)

    Could you please provide a link to your site, as it would allow us to help you more easily. Thanks!

    Thread Starter livetoerr

    (@livetoerr)

    The link is

    You can use location for example – I would like the menu overlay going over the entire feature image picture. Thanks!

    Thank you for providing the link to your site!

    You can achieve what you’re after with some custom CSS.

    To add custom CSS, firstly set up a child theme or activate a custom CSS plugin. If you have Jetpack installed then you can activate its custom CSS module.

    Enter the following snippet in either the editor for your CSS plugin or the style.css file of your child theme:

    .hero.with-featured-image {
    position: relative;
}

.hero.with-featured-image:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.225);
}

@media screen and (min-width: 1020px) {
    .hero-image .site-header {
        background: transparent;
    }
}

    Let me know how you get on with that or if you have any extra questions.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Header Menu Overlay’ is closed to new replies.