This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Mobile responsive layout – masthead behaviour

Resolved 6 replies premiumthemetheme-vantage
Ben Short
11 years ago · Last reply by Andrew Misplon 10 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.

Need fast email support? Get SiteOrigin Premium

Replies

6
  1. Ben Short 11 years, 3 days ago

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

    Cheers,
    Ben

  2. Greg Priday Staff 11 years, 2 days ago

    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. Ben Short 11 years, 21 hours ago

    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. Andrew Misplon Staff 10 years, 11 months ago

    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.

    • Ben Short 10 years, 11 months ago

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

      • Andrew Misplon Staff 10 years, 11 months ago

        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.

Have a different question or issue?

Start New Thread