Add white space on top of jumbotron Background Image

Hi, I want to add a white space on top of jumbotron Background Image so my logo and my menu to appear there and no inside the image (in all the pages not only in homepage). Is there any css about this?

Hello there,

I hope you are doing well today.

It would not be possible to separate the image from the menu but the menu can be given a background color/ background banner.

Could you please provide a link to your website so that I can inspect it?

Best Regards,

Thanks for the answer! Well my site is in private mode because I still customize it. Is there an additional css for the color/banner or should I search in the customize section?


  1. Try this Custom CSS in Appearance -> Customize -> Additional CSS or put that inside your child theme’s style.css
#header .top-header {
    background-color: rebeccapurple;
  1. For positioning the jumpotron image, use this Custom CSS
#header.header-front-page {
    background-position: top;

You can play around with the background-position in firefox or chrome developer tools to get the desired result: CSS background-position property

Let us know,