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.

Button widgets overlapping logo

Resolved 4 replies premiumthemetheme-vantage
Aston Fletcher
11 years ago · Last reply by Artem Vlasenko 10 years ago

I’ve tried the code from other posts but they are not solving my problem, I’m assuming because it’s text and not buttons.

I have my logo with more than enough space to the left side of the header area. On the tablet view however, the two buttons are moved over the logo area obscuring it.

Desktop view is fine.
Mobile view is cramped. ( The two buttons are stacked together)
Tablet is overlapping.

Sincerely,

Aston

URL: http://thesupersqueegee.com

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

4
  1. Andrew Misplon Staff 11 years, 1 month ago

    Hi Aston

    Try the following under Appearance > Custom CSS:

    /* Vantage Header Responsive Breakpoint */
@media (max-width: 1060px) {
  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;
  }
}

    That breakpoint should work, increase it if needs be.

    • Aston Fletcher 11 years, 1 month ago

      Thank you so much! A little fiddling around and I got it looking exactly how I wanted it to!

      (I increased the margin on the bottom widget so they weren’t stacked on top of each other. Fixed the problem I was having on phones/small mobile devices.)

  2. Andrew Misplon Staff 11 years, 1 month ago

    Super, thanks for the feedback. Glad you were able to resolve.

  3. Artem Vlasenko 10 years, 5 months ago

    I have the same problem with button overlapping the logo, but can’t figure out which line of code to change for adjustment. Have been playing with % and px amounts, but no difference when viewed on mobile.

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