Home>Support>Logo is overlapped by header widgets

Logo is overlapped by header widgets

By zkagen, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hi,

I am testing the functionality of Vantage Premium, before installing it on live sites.

I have made the below mentioned testsite.

When I resize the browser window, the header logo is overlapped by the header widgets before it line breaks.

In other words, the social icons are moving in behind the logo, instead of breaking to a new line.

Is there a way to control the point, where the widgets are placed below the logo?

2. question: In mobile mode, is there a way to center the content of the right header widget?

Thanks in advance.
HC

URL: http://wpwork.zkagen-marketing.dk/

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, 8 months ago Andrew Misplon
    Hi, I Work Here

    Hi Hans

    This point can be changed but to do properly requires all of the below dropped into Appearance > Custom CSS:

    /* Vantage Header Responsive Breakpoint */

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

    Adjust the 960px figure to suit your needs.

    You’ve used inline CSS in the header text paragraph so to override that, include the following under Appearance > Custom CSS:

    @media (max-width: 960px) {

header#masthead .textwidget p[style] {
text-align: centre !important; 
}

}
  2. 9 years, 8 months ago zkagen

    Thanks Andrew,

    The first part did the trick, and worked nicely, but the second part has no effect.

    It is implemented on my site now, so perhaps you can see there why nothing happens?

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

    Sorry, please use:

    @media (max-width: 960px) {

header#masthead .textwidget p[style] {
text-align: center !important; 
}

}
  4. 9 years, 8 months ago zkagen

    Perfect,

    – however the social media icons still floats left on browser widths between 960px to 680px.

    Can that be fixed too?

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

    Sure, here we go:

    @media (max-width: 960px) {

/* Vantage Center Social Media Widget */

.widget_vantage-social-media {
text-align: center;
}

.widget_vantage-social-media .social-media-icon {
display: inline-block;
float: none;
}

}
  6. 9 years, 8 months ago zkagen

    Excellent!

    Thanks Andrew :-)

  7. 9 years, 8 months ago Andrew Misplon
    Hi, I Work Here

    For sure :)

  8. 9 years, 8 months ago zkagen

    Hi again Andrew,

    I am experimenting with another social media icons plugin, and I don’t seem to be able to find the correct css selector to make this center on mobile, like you helped me with the Vantage Social Media above.

    Can you help me with the correct css selector to center the social media icons in mobile mode, that are now online on my test site?

    http://wpwork.zkagen-marketing.dk/

    Even better, can you tell me how I find it myself?

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

    For sure, try this:

    @media (max-width: 960px) {

/* Vantage Center Social Media Widget */

header#masthead #header-sidebar .mg-wpsi { 
text-align: centre !important; 
}
header#masthead #header-sidebar .mg-wpsi li { 
display: inline-block !important; 
float: none !important; }

}

    The widget is declaring its own styles right before the icons and is using !important so my CSS might not work.

    Here is how I’m inspecting the source: https://siteorigin.com/basics/modifying-theme-design-with-custom-css/
    Here is the theory behind inline-block lists vs floated lists: http://www.ternstyle.us/blog/float-vs-inline-block

    Just check out the first link though. The second one is pretty specific to this situation, bit of a boring read.

  10. 9 years, 8 months ago zkagen

    Hi Andrew,

    Thanks for you help width this.

    You are right, it does not work. However I got it to work by removing the !important from the plugin source file, but then I have to change it every time the plugin gets updated.

    I think I read somewhere, that SiteOrigin is working on an advanced Social Media Icon plugin. So it might just be better to wait for that.

  11. 9 years, 8 months ago Andrew Misplon
    Hi, I Work Here

    Glad to hear you found a temporary solution.

    We should be pushing an update to the Widgets Bundle plugin in the next week or so with our new Social Media widget in there. Looking forward to it!

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