Remove header image but still have button?

Hi

I am playing around with removing the header image on my site (www.newmiddleclassdad.com) but I really like having the button which goes away if I select menu only in the header options.

Is there a way to not have a header image but still have the button?

Thanks

Jeff

Hello Jeff,

You are probably referring to header area with a button over it, and it is currently disabled on your site. It is possible to hide image, and just to have background instead with some css code, so if you are ok with that approach please enable it again and let me know so I can prepare necessary code.

Best Regards!

Thank you!

Ideally below the menu I would just have a small space which would just
have the button before the content starts below it. I wasn’t sure from
what you said if what you were talking about would actually shrink the
height of the header area (which is what I would want) or if it would just
remove the image.

Can you clarify?

Thank you

Jeff

Hi again Jeff,

Yes header can be reduced and image hidden, and It could look like this for example https://www.screencast.com/t/n3sPiiti .

Best Regards!

Thanks!

That’s exactly what I would like! I have reactivated it so you can figure
out the code.

Thanks

Jeff

Hi Jeff,

Complete code for this is below:

.header-image img.large-header {
    visibility: hidden;
    height: 300px;
}

.header-image h4.header-subtext,
.header-image h3.header-text {
    display: none;
}

.header-image a.button.header-button {
    margin-top: 90px;
}


@media only screen and (max-width: 1024px) {
    .header-image .small-header {
        visibility: hidden;
        height: 110px;
    }

    .header-image a.button.header-button {
        margin-top: 0px;
    }
}

You can add it from Appearance > Customize > Additional CSS field, and it should look like this:
desktop - https://www.screencast.com/t/Hw4rPuRfIF
mobile - https://www.screencast.com/t/ytiZDPAvrN

Best Regards!