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.

Logo is overlapped by header widgets

Open 11 replies premiumthemetheme-vantage
zkagen
11 years ago · Last reply by Andrew Misplon 11 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.

Need fast email support? Get SiteOrigin Premium

Replies

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

    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. zkagen 11 years, 1 month ago

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

    Sorry, please use:

    @media (max-width: 960px) {
header#masthead .textwidget p[style] {
text-align: center !important; 
}
}
  4. zkagen 11 years, 1 month ago

    Perfect,

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

    Can that be fixed too?

  5. Andrew Misplon Staff 11 years, 1 month ago

    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. zkagen 11 years, 1 month ago

    Excellent!

    Thanks Andrew :-)

  7. Andrew Misplon Staff 11 years, 1 month ago

    For sure :)

  8. zkagen 11 years, 1 month ago

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

    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. zkagen 11 years, 1 month ago

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

    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.

Have a different question or issue?

Start New Thread