Home>Support>Logo + Site title

Logo + Site title

By wizlore, 10 years ago. Last reply by Andrew Misplon, 10 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hi.
When I upload my logo it replaces the site – title.
Is there a way to have both side by side, above the menu?

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Hi Wizlore

    Thanks for reaching out.

    You could make use of the Appearance > Theme Settings > Logo > Header Text field or the header widget area at Appearance > Widgets > Header.

    It’s unfortunately, not possible to add the logo and site title at the same time from Vantage theme settings as they stand at the moment.

  2. 10 years, 1 month ago wizlore

    Ok. Then is it possible to style the header text differently (Text that appears to the right of your logo) and center align it?

  3. 10 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Sure, the header text can be styled by adding the following to Appearance > Custom CSS:

    /* Header Text */

header#masthead .hgroup .support-text {
color: #333333;
font-size: 18px;
font-style: italic;
}

    The value “italic” can be changed to “normal”.

    Alternatively you might give our new CSS Editor plugin a try. It can help make this same change:

    Page: SiteOrigin CSS Editor

    To center the header text you might add the following to Appearance > Custom CSS:

    #masthead .hgroup .support-text {
  right: 45%;
}

    Hope that helps.

  4. 10 years, 1 month ago wizlore

    Thanks. very good. Only problem is that the text overlaps the logo, when the window width is reduced.
    At some point the text will be placed below the logo… but first it overlaps. I can’t seem to find a workaround.

  5. 10 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    We have an upcoming theme setting solution but for now the Custom CSS block to fix is unfortunately quite big.

    Insert the following at Appearance > Custom CSS. All you need to change is the 960 value. Test it out first. If there is still overlap then slowly increase the value. 1024 might work.

    /* 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;
  }
}
  6. 10 years, 1 month ago wizlore

    TY.
    It works for now! :)

  7. 10 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Super, glad that helped :)

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