Is there a way to make an image overlay the header?

Support
#1

hello,

my draft website is - http://www.rhodestostrength.com/homepageb/ and i want my site image to overlay the header so that there isn’t a ‘white space’ between the image and the header.

a similar site is this one - https://www.barbellblondie.com/.

how do i get my image to completely cover the header? thank you!

#2

Hi there,

Thank you for reaching out to us. To achieve this, please add the following code in the Theme Options > CSS:

@media screen and (min-width: 980px) {
    header.masthead {
        position: absolute;
        width:100%;
    }
    .x-navbar {
        background-color: transparent !important;
        box-shadow: none !important;
        border-bottom: none !important;
    }
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#3

Hello,

I did insert the code into Theme Options > CSS and cleared out the cache to refresh the page but it didn’t work. is there another code? thanks!

#4

Hey Candice,

I checked your site and couldn’t find the code previously provided. There could be a syntax error in your Global CSS that could be preventing the code to work. You can try adding the above code in your child theme’s style.css file:

@media screen and (min-width: 980px) {
    header.masthead {
        position: absolute;
        width:100%;
    }
    .x-navbar {
        background-color: transparent !important;
        box-shadow: none !important;
        border-bottom: none !important;
    }
}

Let us know how this goes!

#5

That worked! Thank you so much!

#6

Oh wait is there a code for mobile too? It doesn’t work on mobile or tablet view. Thanks!

#7

Hi again,

To make it work on mobile devices as well, simply remove the media query from the above code so you will have the following code:

    header.masthead {
        position: absolute;
        width:100%;
    }
    .x-navbar {
        background-color: transparent !important;
        box-shadow: none !important;
        border-bottom: none !important;
    }

This will work for all screen resolutions. Hope this helps!

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.