Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Centering logo in header in responsive wordpress

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #193346
    Ekim
    Participant

    Hi. This code is working for me:

    .site-branding img {
    position: absolute;
    left: 50%;
    margin-left: -100px; /* Half the width */
    }

    HOWEVER, when the screen size is reduced, any elements beneath the header jump up and go BEHIND the logo. The logo was originally at left in the header (theme default) – and this overlapping did not occur at smaller screen sizes – elements stayed put below. Got a fix? Thanks!

    #193348
    shaneisme
    Participant

    When you position something absolutely it is removed from the flow. In other words it won’t affect the things around it.

    Most likely though, this is overkill. You should just be able to put text-align: center on its parent instead.

    Of course, without real code to look at I’m just guessing.

    #193350
    Ekim
    Participant

    Thanks for replying.

    text-align:center was the first thing I tried, but didn’t work. The code that’s “almost” working:

    .site-branding img {
    position: absolute;
    left: 50%;
    margin-left: -100px; /* Half the width */
    }

    I got off the CSS TRICKS site. There’s gotta be a way! Thanks.

    #193352
    shaneisme
    Participant

    You’ll need to set up a reduced test case on CodePen or provide a URL, otherwise we can’t help.

    #193359
    Ekim
    Participant

    Here’s the URL: mondorcreative.com

    Thanks!

    #193365
    shaneisme
    Participant

    As I stated originally, an absolutely displayed item is outside the flow of the page. So when #masthead collapses on your “mobile” breakpoint, the content that it was keeping down comes on up.

    You can solve this any number of ways… you can piggyback on that breakpoint and make the image the same size as the new menu bar… if you don’t want to make it smaller (probably a bad idea), you can just make it position: relative instead, but then you’d need to restyle it for centering. And I’m sure there are many other ways to do it.

    I’d also look into making a responsive typography scale so that mobile screens aren’t overwhelmed by huge headings.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.