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.

Header widget is overlapping with Title in responsive mode

Resolved 9 replies questionthemetheme-vantage
mediboard
7 years ago · Last reply by Alex S 7 years ago

This is happening for responsive sizes >680px <768px

Vanilla Vantage free version used the customize logo + site title + Vantage social media widget in the Header

Only custom CSS is:

#masthead .hgroup h1 {
text-transform: uppercase;
font-weight: 400;
}

Is there an easy fix for this overlap?

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

Need fast email support? Get SiteOrigin Premium

Replies

9
  1. Alex S Staff 7 years, 1 month ago

    Hi Mediboard,

    Do you have a public URL where we can take a look at what’s going on?

  2. mediboard 7 years, 1 month ago

    The site is in our staging area which unfortunately isn’t public.

    This image illustrates the overlap.

    https://www.ibspatient.org/files/Vantage-overlap.png

  3. Alex S Staff 7 years, 1 month ago

    Hi Mediboard

    I really need to inspect this overlap to work out what’s going on. Would it be possible for you to create a temporary account for us so we can log in and take a look?

  4. Alex S Private Staff 7 years, 1 month ago

    This is a private message.

  5. WordPress Private 7 years, 1 month ago

    This is a private message.

  6. mediboard 7 years, 1 month ago

    Done. Thanks.

    URL is https://www.ibspatient.org/staging/wp

  7. Alex S Staff 7 years, 1 month ago

    Hi Mediboard,

    Try adding the following CSS to WP AdminAppearanceCustom CSS:

    @media (max-width: 768px) {  
  .hgroup .widget_vantage-social-media .social-media-icon {
    float: none;
    display: inline-block;
  }
  body.responsive #masthead .hgroup #header-sidebar {
    position: static;
    display: block;
    margin-top: 30px;
    max-width: 100%;
  }
  body.responsive #masthead .hgroup #header-sidebar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: auto;
  }
  body.responsive #masthead .hgroup, body.responsive #masthead .hgroup #header-sidebar .widget, body.responsive #masthead .hgroup .logo {
    text-align: center;
    display: block;
    margin: 0 auto;
    float: none;
  }
}

    How does that look?

  8. mediboard 7 years, 1 month ago

    I like it, thanks!

    I was trying to do the same thing, borrow the code from @media (max-width: 680px) and move it to (max-width: 1080px). I never thought to create a @media (max-width: 768px) section. Nice solution.

  9. Alex S Staff 7 years, 1 month ago

    Hi Mediboard,

    Great to hear that helped!
    Please be sure to post another thread if you have any other questions.

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