How to move the banner up to fill the space between the header n menu

Hi there! You want your horizontal menu to shift upward toward the Header Image right? You could adjust that with CSS.

First make sure the Custom CSS module is activated in your Jetpack plugin. Then in Appearance > Edit CSS, add this:

.site-branding {
  height: 70px;
}

Adjust the number to whatever works for you. Be sure to view your site on different devices to make sure your Header and Menu aren’t competing for space anywhere.

For the Header Image width, the Sela theme allows a Header Image that is up to 1180px wide, but it will only be that wide if you upload an image large enough to spread across the full area. You may want to resize your Header Image and upload different size options (up to 1180px wide and 160px tall) to see which one you prefer.

Let me know if you have any questions! ??

If you are talking about the space between the hero image and the menu:

I just had a really quick look and can see you’ve zeroed out most of the margins and padding but I can see this:

It looks like padding on the

.front-page-content-area .without-featured-image {
    border-bottom: 1px solid #f2f2f2;
    padding: 3em 55px 0 55px;

So maybe write that padding down to 0 and that will clear the space.

You have your hero image in the content area. And I take it that’s not a ‘featured image’?

That image won’t be able to take up full screen width where it is because it is inside the .site div which seems to be wrapping up everything and it’s set to be 1180px wide max.

.site {
    margin: 0 auto;
    max-width: 1180px;
    padding: 0;
}

Hi Sarah, thank you for the reply.

I Want to the white space between the image and the menu to be removed, i dont want a lot of space between the header image which is the image slider and the navigation menu.

Thank you

Hi Monalicia, thank you for the reply i tried that but didnt work.
i am using meta slider for the image it is not a featured image. the pictures i used is bigger the than 1180px 160px

I want the image to cover the entire screen of the header image section.

example : https://uk.lush.com/

Hi i have managed to resolve everything thank you all so much for the help

Hi sorry i more thing.

this image is a little blurry, the text is blurry too. how can i fix that please help.

obedyeboah – it looks like your slider images are being resized in a way that makes them smaller first, then larger – that results in blurriness. Since the slider isn’t part of Sela I’d suggest you ask for assistance with that in the plugin’s forum.

If you’re seeing blurry images or text in Sela itself (outside of something added by a plugin) could you please point me to where specifically, or even better, upload a screenshot so I can have a look?

Here’s a guide on how to make a screenshot:
https://en.support.wordpress.com/make-a-screenshot/

You can upload the screenshot – in a graphic format like JPG, PNG, or PDF – in your Media Library, and provide a link so I can see it, or upload it with a service like Cloudup, Imgur or Snaggy.

Thanks for the information Kathryn.

if i may asked what size px is the header image set in sela css?

The recommended header image size for Sela is 1180 × 160 pixels.