Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] How to combine header background and logo

Home Forums Support How to combine header background and logo

  • This topic has 15 replies, 4 voices, and was last updated 5 years ago by bdbrown.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #71740
    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?
    background image plus logo

    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

    background image plus logo

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

    #71832
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #71918
    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.

    #72226
    Tom
    Lead Developer
    Lead Developer

    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?

    #72256
    Carlos Paramio

    I want something like this
    logo-above-menu

    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…

    #72641
    Tom
    Lead Developer
    Lead Developer

    Give this a go..

    .inside-header {
          position:relative;
    }
    
    .site-logo {
          position: absolute;
          bottom: 0;
    }
    #72643
    Carlos Paramio

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

    #72677
    Tom
    Lead Developer
    Lead Developer

    Try this:

    @media screen and (min-width: 769px) {
          .inside-header {
                position:relative;
          }
    
          .site-logo {
                position: absolute;
                bottom: 0;
          }
    }
    #72763
    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

    #73318
    Tom
    Lead Developer
    Lead Developer

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

    Let me know 🙂

    #73549
    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.

    #73691
    Tom
    Lead Developer
    Lead Developer

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

    #73899
    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!

    #74091
    Tom
    Lead Developer
    Lead Developer
    #150626
    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.

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.