Center Header Logo

Viewing 3 replies - 1 through 3 (of 3 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The logo can’t be centred because it has the “Parks make life better” image to the right of the logo.

    Thread Starter bcheah

    (@bcheah)

    Ok. I wonder if I can center both of the logos and maybe build out some white space to get separation. Would that screw up everything on mobile and tablet devices?

    The class logo_container is your key. Remove the float:left (i.e. float:none; in your child theme) then add margin-right:auto; margin-left:auto; to that class. That will center your logo but it throws your id selector header-right (Parks make life better) to the next line. You can fix that with position:relative; top:-90px; (or em or % could work better) but then it will definitely be messy on the mobile. So then you can use in your child theme @media only screen and (max-width: 981px) { insert css here } to adjust it for tablets and mobile.

    Elegant Themes could do a much better job of making the Header and Logos more configurable in their customiser. If you look at it on a smart phone, the logo scales down to a very small size.

    This is a good reference about scaling the logo in Divi
    https://nerdnomads.com/divi-logo-size-customisation (I have no association with them).

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Center Header Logo’ is closed to new replies.