[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 🙂

[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?

[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;
}

[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;
      }
}

[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 🙂

[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).

[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 🙂

[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