Home>Support>Widgets overlap logo in header

Widgets overlap logo in header

By Lindsay Fanning, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hello. I am running Vantage Premium and really enjoy the theme. However, I’m running into an issue with the header, which includes my logo. It looks fine on a normal sized computer screen. However, when you reduce the size of the screen, the header widgets overlap and cover the logo. I’m not concerned too much about the mobile portion because I have installed a plug in that changes for cell phones. What can I do to make it so that it stays in proportion when the screen size is reduced?

Also, I would like to have the paypal and credit card info sitting on top of the menu. Currently, there is some padding between them. How can I change this as well?

Thank you for the great theme!

Lindsay

URL: http://www.autotechrescue.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 Lindsay

    Thanks for reaching out. Please try the following under Appearance > Custom CSS:

    /* Vantage Header Responsive Breakpoint */

@media (max-width: 1000px) {
  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;
  }
}

    Not quite following with regards to the payment logos. There is some text above them. For max control over the header layout you might try the Layout Builder widget in that area.

  2. 9 years, 6 months ago Lindsay Fanning

    Thank you. That worked. However, is there a way just to make everything smaller instead of stacked when a page is minimized? I might not have said that correctly in my original post. I was trying to get everything to reduce in size when the page was made smaller. If that’s not an option with the theme, I will leave it as is. I’ll try the layout builder for the paypal.

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

    Unfortunately not. We have global settings to turn responsive behaviour off on mobile devices but nothing on a row or widget by widget basis. Stacking of columns is standard responsive behaviour that you’ll see on most sites. Sorry I don’t have more on that point.

  4. 9 years, 6 months ago Lindsay Fanning

    No worries! It looks ten times better. Thank you so much!

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

    Thanks for your understanding. All the best.

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