Header layout

  • Hi
    I am very happy with the layout in mobile/tablet view, but the desktop view could do with a bit of css trickery to improve alignment and eliminate unnecessary white space. I have attached a link to an example of what I would like to do. Top image is how it currently is, bottom image is desired layout.
    Hoping you can help with some/all of this. I don’t want to touch the mobile/tablet view at all.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • This should get you somewhere close I believe, you can add it to Appearance->Customize->Additional CSS

    @media only screen and (min-width: 960px) {
     #header-wrap #header {
         padding-top: .5em;
         padding-bottom: .5em;
     }
}
@media only screen and (min-width: 960px) {
    #header #logo .site-description {
        float: none;
        margin-left: 97px;
        margin-top: -47px;
        padding-bottom: 15px;
    }
}

@media only screen and (min-width: 960px) {
     #header #header-content {
         margin-top: 22px;
         float: right;
         display: inline-block;
    }
}

    Should only apply to anything above 960px browser width so shouldn’t touch the mobile settings from my limited testing.

    Thread Starter mpbaweb

    (@mpbaweb)

    Thanks, that’s close, but it removes the tagline

    Hmm, do you have a screenshot of what it looked like? I had tested out that code on the domain in your profile

    https://www.mpba.org.uk/

    It appeared to work correctly but I was using Chrome, were you using a different browser? Some browsers display a bit differently so it may need a bit of tweaking to get just right across them all.

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

Tags