Full width header image

Support
#1

I am trying to add a full width image as a header for my site.
So far, all I have is the image above the main part of the site and not above the sidebar.
I know the navigation would have to move - and would like it at the top of the sidebar.
Is this possible?
My page can be found at
http://nikwhite.me.uk/readership/

#2

Hello @manofmann,

Thanks for asking. :slight_smile:

Please add following CSS under X > Theme Options > CSS:

.x-brand img {
    width: 100% !important;
}

Thanks.

#3

Thanks - that looks great!
Is it possible to get the padding at the top, or to fill the whole screen width rather than just the above the page and sidebar?
Thanks

#4

Hey There,

To get rid of the padding, you need to go to X > Theme Options > Header > Logo & Navigation. You must set the Layout to Stacked.

And please also add this code:

.x-logobar .x-container.max.width {
    width: 100%;
    max-width: 100%;
}

We would loved to know if this has work for you. Thank you.

#5

Thank you again - it is much better, but there is still a border around the header image

The full global css is

> .entry-wrap {
>   background-color: #000145;
>   box-shadow: 2px black;
> }

> form#searchform input {
>     background-color: #000077;
> }
> .form-search:before,
> form#searchform input {
>     color: #fff;
> }

> .x-logobar .x-container.max.width {
>     width: 100%;
>     max-width: 100%;
> }

> .x-brand img {
>     width: 100% !important;
> }

I hope you can help

#6

Hello there,

You can remove the border by adding this code into your Global CSS:

.x-logobar-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

Hope this helps.

#7

Brilliant!
That is just what I wanted - thank you everyone!

#8

You’re welcome.

#9

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