Home>Support>Constraining a header height

Constraining a header height

By John Wimberly, 9 years ago. Last reply by John Wimberly, 9 years ago.

Hi,

I’m a new Vantage Premium user trying to constrain the overall size of the header for non-mobile viewing. I was wondering if there was a way to do this within the Appearance > Editor CSS area. Basically, I want to be able to control the height of the header, and have the other elements remain responsive. I’ve been fiddling there quite a bit to get what I’m looking for, but this one has stumped me.

Part of the problem might be that I’m using a 5k monitor and the hi-res logo is switching in and out when I’m testing (though I want that to not happen to others, so I do need to sort it out!).

The theme is responsive and I think that might be part of what is confusing me.

URL: http://www.transitionbay.ca/transition/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 8 months ago Andrew Misplon
    Hi, I Work Here

    Hi John

    Thanks for reaching out.

    Appearance > Editor should only be used if you’re running a child theme. Whenever you update the theme all files are overwritten, so any changes made via Appearance > Editor will be lost.

    If you’re interested, here is our tutorial on Custom CSS: https://siteorigin.com/basics/modifying-theme-design-with-custom-css/

    Header Padding:
    Have you tried setting header padding at Appearance > Customize > General > Header Padding?

    Logo:
    The logo switching in and out of Retina isn’t something we’ve seen before. When does that happen? When re-sizing the window or on load?

  2. 9 years, 8 months ago John Wimberly

    Hi,

    I’m seeing the retina logo resize at loading and when resizing, both in Chrome and Safari. I can’t get a consistent size.

    As far as the header, I’m already at zero padding. But resizing means that the logo and the other qualities of the header collide and overlap. Is there a way to constrain it to take up no more than 30% of the header (on non-mobile browsers)?

  3. 9 years, 8 months ago Andrew Misplon
    Hi, I Work Here

    Thanks for the info there.

    It’s possible you might see the original and then Retina logo fire on load. At the moment there isn’t we can do on that but will definitely keep it in mind as we develop the theme further. Most users will load the site up at one resolution on their device and unlikely to resize the browser while viewing, that’s more something we land up doing while testing.

    The logo overlap issue we can resolve.

    Insert the below into Appearance > Custom CSS. Should do the trick.

    /* Vantage Header Responsive Breakpoint */

@media (max-width: 980px) {
  body.responsive header#masthead .hgroup {
    text-align: center;
  }
  body.responsive header#masthead .hgroup .logo {
    float: none;
  }
  body.responsive header#masthead .hgroup .logo img {
    margin: 0 auto;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  body.responsive header#masthead .hgroup .support-text,
  body.responsive header#masthead .hgroup #header-sidebar {
    position: static;
    display: block;
    margin-top: 30px;
    max-width: 100%;
  }
  body.responsive header#masthead .hgroup .support-text img,
  body.responsive header#masthead .hgroup #header-sidebar img {
    max-width: 100%;
    height: auto;
  }
  body.responsive header#masthead .hgroup #header-sidebar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: auto;
  }
  body.responsive header#masthead .hgroup #header-sidebar .widget {
    display: block;
    margin: 0 auto;
    float: none;
  }
}
  4. 9 years, 8 months ago John Wimberly

    Is there a way to constrain the header vertically?

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More