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.

Widgets overlap logo in header

Resolved 5 replies premiumthemetheme-vantage
Lindsay Fanning
10 years ago · Last reply by Andrew Misplon 10 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.

Need fast email support? Get SiteOrigin Premium

Replies

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

    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. Lindsay Fanning 10 years, 11 months ago

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

    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. Lindsay Fanning 10 years, 11 months ago

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

  5. Andrew Misplon Staff 10 years, 11 months ago

    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.

Have a different question or issue?

Start New Thread