[Resolved] How to combine header background and logo

[Carlos Paramio]

I’m not doing any progress last days (yes, I’m learning a lot but no results are showing…)
This is driving me crazy

I’d like to put the background image in the header and the official logo floating

How can I manage the place where the logo is shown?

In the mobile view it gets even worse: the logo stays centered covering the details… I’d prefer the logo to be in the upper-left corner or maybe right above the main nav

Sorry to put images, but I’m working in a private (and free) domain so you’re not able to visit the site yet

[Tom]

Hi Carlos,

What about combining the two images into one header image, and then uploading it as the header/logo.

That way you’re not using two separate images, and everything will stay consistently placed no matter what size the website is.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Carlos Paramio]

The problem is that both the logo and the background photography are noticeably wider than high, so if I combine them side by side the result would be something like 3000x1500px, hard to fit in the screen.

I definitely want to set the logo right above the nav bar, so the corporate green colour will blend.

[Tom]

So where are you wanting the logo to sit on the background? There’s no way you could crop it down to display what you want it to display at 300px height?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Carlos Paramio]

I want something like this

I have made it possible playing with Element Spacing/Header, setting bottom space to 80px

and then adding this CSS:
.site-branding {
display: inline-block;
}
.site-logo {
float: left;
margin-left: 10px;
margin-bottom: -84px;
}

I’m sure this is not the most proffesional way to do it… but seems to work, at least while I don’t change the 80px bottom margin to something higher…

[Tom]

Give this a go..

.inside-header {
      position:relative;
}

.site-logo {
      position: absolute;
      bottom: 0;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Carlos Paramio]

mmm… Perfect for PC but in the mobile view logo moves to the middle-right of the screen
Thanks

[Tom]

Try this:

@media screen and (min-width: 769px) {
      .inside-header {
            position:relative;
      }

      .site-logo {
            position: absolute;
            bottom: 0;
      }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Carlos Paramio]

Same result
I’d prefer the logo would stay fixed on the left of the screen, as shown in the last screenshot I posted here.
I have tried playing with CSS but have no skills at all

[Tom]

You’ll need to remove the original code I gave you first, and strictly use the most recent code I provided.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Carlos Paramio]

I’m afraid to say that it has not worked either.

I have tried removing the logo in Customizer/Header/Logo + removing ALL the CSS code I have typed before (even not this topic-related code).
Saved the changes.
Then I have added a brand new logo (saved changes) + copy/paste the latest code you kindly gave me (saved changes):
The logo places perfectly right above the nav bar but in the mobile view it moves to the center of the header.

I have played with Element Spacing/Header to let the background image to show in its entirely with the same result.

[Tom]

Hmm ok, add this (and keep the previous code as well):

@media screen and (max-width: 768px) {
      .inside-header {
            position:relative;
      }

      .site-logo {
            position: absolute;
            bottom: 0;
            left: 0;
      }
}

Also, remove the negative margin you’ve added to the site logo (-80px).

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Carlos Paramio]

Closed case! 🙂
In addition, I can edit the left margin in that CSS so I’m able to put the logo in the exact point I want it to appear.

Thank you sir!

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[yash]

i want to customize the header and footer of generatepress theme so that i can add background color and reduce the size of it.
any help would be appreciated.

[Author]

Posts