Home>Support>Mobile responsive layout – masthead behaviour

Mobile responsive layout – masthead behaviour

By Ben Short, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hi there,

I’m trying to wrap my head around the size of the masthead once the page hits 680px and the mobile layout kicks in, but I’m struggling a little here.

As you can see when the site is full size, the logo is flush to the menu, forced through the following css in my child theme:

/* Set masthead format */
header#masthead .hgroup {
  padding-top: 35px;
  padding-bottom: 0px;
}

However, once the page size hits 680px, the div.hgroup.full-container for some reason increases in height by 30px, and the logo is no longer flush to the menu.

Could you help in finding the code I’d need to keep the logo flush to the menu, even in the mobile responsive layout?

Thanks,
Ben

URL: http://laurencariscooks.com

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, 7 months ago Ben Short

    Hi there, just checking in if there’s any updates?

    Cheers,
    Ben

  2. 9 years, 7 months ago Greg Priday
    Hi, I Work Here

    Hi Ben

    Sorry about the delays. We’re experiencing quite a high support load at the moment. We’re getting some more support staff onboard at the moment, so things will be golden soon :)

    I’d just suggest using !important to set the bottom margin to ensure the responsive CSS doesn’t override what you’ve done.

    /* Set masthead format */
header#masthead .hgroup {
  padding-top: 35px;
  padding-bottom: 0px !important;
}
  3. 9 years, 6 months ago Ben Short

    Hi Greg,

    No worries, thanks for checking it over. Unfortunately that didn’t seem to work as the padding rules were being adhered to in all layouts, but thankfully I finally managed to diagnose and resolve the issue was though using the element inspector in Chrome. It was this part of the Vantage parent theme stylesheet that was causing the issues:

    body.responsive header#masthead .hgroup .support-text,
body.responsive header#masthead .hgroup #header-sidebar {
    position: static;
    display: block;
    margin-top: 30px;
    max-width: 100%;
  }

    The “position: static” part of the responsive style for the support-text class was overriding the normal “position:absolute” style defined earlier in the stylesheet for the non-responsive class. Adding the following code to my child theme’s stylesheet fixed this perfectly:

    body.responsive header#masthead .hgroup .support-text, body.responsive header#masthead .hgroup #header-sidebar {
  position: absolute;
}

    So one last question before I go! This works great while I don’t have any “support text” in my masthead, but where exactly does this come from? Is it something added automatically, or something I’d define in the theme settings? I couldn’t see any mention of it at first glance.
    Just wanted to make sure I didn’t break anything in future by switching the style for this part the responsive layout off :)

  4. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Hi Ben

    Thanks for the long wait here.

    support text refers to the text that can be added from Appearance > Theme Settings > Logo > Header Text. You’re not using that so I don’t see any problems with what you’ve done here.

    • 9 years, 6 months ago Ben Short

      Sorry for the slow reply Andrew. Thanks for the clarification – all resolved.

      • 9 years, 6 months ago Andrew Misplon
        Hi, I Work Here

        Super, glad to hear this is resolved. Cheers.

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