Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 20, 2020 at 10:22 am #1239490
    gerwenreclame

    Hello,
    I have a problem with my logo in the header:
    I want to center that logo with the search & menu icon on the right.

    In an older topic i found a solution (fast CSS) and it works fine (http://gerwen.nl/site/wp-content/uploads/2020/08/1.jpg).
    But on smaller screens the logo is cropped on both sides (http://gerwen.nl/site/wp-content/uploads/2020/08/2.jpg).
    How can i solve this?

    Thanx for the answer.
    Theodor!

    ————————-
    Easy CSS:
    /*logo-top*/
    .logo img {
    display: none;
    }

    .logo {
    background: url(‘https://gerwen.nl/site/wp-content/uploads/2020/07/gerwen-online-en-offline-reclame-logo600.svg’) no-repeat;
    width: 600px;
    }

    #top div .logo {
    float: none;
    position: absolute;
    left: 50%;
    top: 15%;
    z-index: 1;
    transform: translate3d(-50%, 0, 0);
    }

    • This topic was modified 4 years, 3 months ago by gerwenreclame.
    August 24, 2020 at 6:41 am #1240275
    Nikko

    Hey Theodor,

    Please use a smaller image for mobile’s logo, then you can use this CSS code:

    @media only screen and (max-width:767px) {
  .responsive #top .logo {
    background-position: center center;
    display: block;
    width: 100%;
    transform: none;
  }
}

    Best regards,
    Nikko

    August 24, 2020 at 11:09 am #1240303
    gerwenreclame

    Hey Nikko,
    Thans for the answer.

    Is it possible to use an different logo for only the (smaller) mobile-devices?
    Or shall i resize the logo for all the screens?

    Logo is now 600 px width. When i resize it, it must be around 200 px te show complete on a mobil screen.
    For a desktopscreen is that very small.

    August 24, 2020 at 12:03 pm #1240325
    Nikko

    Hi gerwenreclame,

    I have checked your site and the logo seems to be properly placed.
    I was actually suggesting to only have the circle logo without the words on the left and right but I think the current look is good enough.

    Best regards,
    Nikko

    August 24, 2020 at 12:19 pm #1240334
    gerwenreclame

    I wasn’t able to fix the problem, so i placed the logo on the left instead of center (in original place, no easy CSS)
    On that way the problem is solved.
    Thanks.

    August 24, 2020 at 11:03 pm #1240540
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Center logo in header, but problem on small screen’ is closed to new replies.