Home>Support>Mobile Responsive/Masthead

Mobile Responsive/Masthead

By Dan Decker, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

I have an issue with my site- www.transtechsolutions.com- it is not responsive on mobile and the masthead appears tiled. The menu also does not compress.

Please let me know steps I can take to fix, I have a client that needs this done ASAP.

URL: http://transtechsolutions.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, 6 months ago Andrew Misplon
    Hi, I Work Here

    Hi Dan

    Thanks for reaching out.

    Appearance > Theme Settings > Navigation > Mobile Menu Collapse Point, that’s set to 0 right now so it will never fire. Increase that to 480 for mobile or 780 or 1024 to target tablet portrait or landscape.

    It’ll take a little effort to get that masthead setup working nicely on mobile. Try starting with this inserted under Appearance > Custom CSS:

    header#masthead {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  background-color: green;
}

header#masthead .hgroup {
  padding-top: 141px;
}

@media (max-width: 680px) {

header#masthead .hgroup {
  padding-top: 0;
  padding-bottom: 119px;
}

}

    Change the value green to a hexadecimal color that matches one of the greens in the banner. Should do the trick.

  2. 9 years, 6 months ago Dan Decker

    Mostly fixed, I took out the padding and moved the masthead to the top but I want to move the menu up to the bottom of the masthead. Also can I use CSS to hide the donate now and facebook buttons?

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

    Sure, just look up that selector using your browser’s developer tool and add it within the media query with a display: none; property/value.

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

    Just add the following within the media query:

    header#masthead .hgroup #header-sidebar {
display: none;
}

    Should do the trick.

  5. 9 years, 6 months ago Dan Decker

    Didn’t work for some reason- the widget I am using is the header and not the sidebar. Is the header under a different name than header? That is what I tried using.

    Also how do i consolidate the field of the masthead as mentioned before so that the menu and masthead are closer together?

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

    Give this is a go, see how it works, perhaps make adjustments from there:

    header#masthead {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  background-color: green;
}

@media (max-width: 680px) {

header#masthead .hgroup {
  padding-bottom: 0 !important;
  margin-bottom: -33px !important;
}

header#masthead .hgroup #header-sidebar {
display: none !important;
}

}

    #header-sidebar is the name of the header widget area div. Perhaps check out our Custom CSS video here, being able to inspect your page with your browser is very useful:

    https://siteorigin.com/basics/modifying-theme-design-with-custom-css/

  7. 9 years, 6 months ago Dan Decker

    I am still having issues with the mobile site- I changed the web address and database.

    The site is now at http://www.sparrowsnestcharity.org. I just need to remove the white padding above and below the banner on 480px display. I put in a negative margin/padding and nothing seems to move it.

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

    Hi Dan Decker

    Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:

    [email protected]

    Just navigate to Users > Add New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the “Send Password” field so we receive the details.

    Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.

  9. 9 years, 5 months ago Private Message - WordPress

    This is a private message.

  10. 9 years, 5 months ago Andrew Misplon
    Hi, I Work Here

    Thanks. I spent some time on this now, cleaned up your Custom CSS and sorted the issue out at 480px. The main problem is we’re basically hacking the Vantage functionality here. That’s the reason for the responsive issues. Ideally the logo should be just the company name etc. on a transparent background, that should be added to Theme Settings > Logo. The green background should be added to Customize > Page > Masthead Background. That would make this much easier to tweak.

  11. 9 years, 5 months ago Dan Decker

    So did you actually change anything on the site? The desktop looked good.

    I can create a childtheme and work with the php to shift those things around if needed as well. I would almost find that easier.

  12. 9 years, 5 months ago Dan Decker

    I see now. All set.

  13. 9 years, 5 months ago Andrew Misplon
    Hi, I Work Here

    I did yes, I re-factored the CSS, added a new breakpoint, removed padding in the header under 480.

    The main issues with using the masthead background as the logo is:

    1. Users can’t click the logo to go home anymore.
    2. The header now gets it height from the header sidebar area padding. That’s fine except we constantly need to adjust that padding to prevent white space showing around the masthead background as it resizes for smaller devices.

    Splitting up the logo and masthead background would sort this all out and make the header much more flexible.

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