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/Masthead

Open 13 replies premiumthemetheme-vantage
Dan Decker
10 years ago · Last reply by Andrew Misplon 10 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.

Need fast email support? Get SiteOrigin Premium

Replies

13
  1. Andrew Misplon Staff 10 years, 11 months ago

    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. Dan Decker 10 years, 11 months ago

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

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

    Just add the following within the media query:

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

    Should do the trick.

  5. Dan Decker 10 years, 11 months ago

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

    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. Dan Decker 10 years, 10 months ago

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

    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. WordPress Private 10 years, 10 months ago

    This is a private message.

  10. Andrew Misplon Staff 10 years, 10 months ago

    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. Dan Decker 10 years, 10 months ago

    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. Dan Decker 10 years, 10 months ago

    I see now. All set.

  13. Andrew Misplon Staff 10 years, 10 months ago

    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.

Have a different question or issue?

Start New Thread