Header image question

Sparkling
1

Hello, I got questions regarding the header image on the blog.

My website is www.owlando.com to see how it currently looks.

I am wondering two things, how do I get the header to completely fill the area between the top of the page and all the way to the navigation meny. Both in height and width. Like in the included screenshot.

OR

To make it boxed, so that it cuts at the same areas like in the included boxed screenshot.

Hope to hear from you soon.

Best regards
Orlando

2

Hi Orlando,

I hope you are well today and thank you for your question.

You can make it boxed layout by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

nav.navbar.navbar-default {
    max-width: 1140px;
    margin: 0 auto;
}
.site-navigation-inner.col-sm-12 {
    padding: 0;
}
.nav.navbar-nav {
    margin-right: 25px;
}

Best Regards,
Movin

3

Hello, the code worked partly.

But it does not really look that good yet, since from the size:

Browser window width: 785
Browser window height: 612

And until:

Browser window width: 1204
Browser window height: 612

It aint boxed. Only when it goes past 1204 in width does the code show.

How can I fix this?

4

My only wish is for the blog to retain like this (the preferred look image attachment) in all sizes, both width and height.

And not like how it looks now in different sizes. (See the not preferred look image attachment)

If there´s a permanent solution for this, I would be forever grateful. As I love this theme.

Best regards
Orlando

5

Also, Im so sorry to ask this much, but I am so close to getting the perfect desired look for this site.
How do I get the boxed sizes to also apply to the slider, as it is now, the width of the slider goes outside the boxed part.

6

Hey Orlando,
Hope you’re doing well today

I’m currently on your site and everything looks pretty good (see screenshot linked below). Did you manage to get the issues resolved?

https://www.diigo.com/item/image/61sbb/spg8

I look forward to your reply :slight_smile:

Best Regards,
Support

7

Try to drag the sizing of the browser in width, I managed to replicate the error as in the screenshots I provided in both Chrome, Safari and Opera.

8

Hi Orlando,
Thanks for keeping in touch with us.

Kindly add and save the following code to Appearance > Customize > Additional CSS:

.navbar .container {
    width: 100%!Important;
}

I hope this helps :slight_smile:

Best Regards,
Support

9

Thank you so much :smiley: Now it follows and it looks so good now, thank you again!

Best regards
Orlando

10

You are most welcome here :slight_smile: