Full width header

Activello
1

I have uploaded a banner image in to the header but I want it to run full-width. How do i do this?

Thnaks
Mandy

2

Hi Mandy,

Thank you for your another question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS

div#logo {
    padding: 0;
}
#logo span.site-name, #logo a.navbar-brand {
    display: block;
}

Best Regards,
Movin

3

Hi Movin,

Sorry for all my questions! I added that code but it hasn’t worked. What size do i need to create the banner at?

Thanks

4

Hi Movin,

Are you able to help with this? Is till cant get the banner full width…

Thanks
Mandy

5

Hi Mandy,

Along with the above code please use the following CSS code and test it after clearing your browser cache.

#masthead > .container {
    max-width: 100%;
    width: 100%;
    padding: 0;
}

Regards,
Movin

6

Thanks for getting back to me!

Thats moved the banner over to the left edge but now its not centred and I have even more white space to the right?

7

This is because the banner image that you have uploaded is not full width and is only in the size 1190px. It should be at least 1300px in size.

You can also use the following CSS code to make the banner image full width but it will stretch the image.

#logo img {
    width: 100%;
}
8

Thanks. What size would I need to create it at to avoid it being stretched and looking blurred when larger?

mandy

9

Please read my previous reply. I have already told you about the size that at least 1300px or more than that.

10

Apologies Movin, I missed that!

Thank you for your help and sorry that I have clearly annoyed you! :S

11

You are most welcome here :slight_smile:

Please advise if you have more questions.

Have a fantastic day!