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.

Stick Logo Image always on top of the site

Resolved 18 replies generalpremium
oli_e
10 years ago · Last reply by Andrew Misplon 10 years ago

Hey, I saw that you are able to stick the menu bar, so it always appears on the top of the site when you are scrolling, You find this option in the theme settings under Navigation > Sticky Menu.

But I would like to stick the logo image including the telephone number of my company to the top at all time. You can see the bar on www.managementsystem-mal-anders.de

How can I always stick this, not the menu bar, to the top?

URL: http://www.managementsystem-mal-anders.de

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

Need fast email support? Get SiteOrigin Premium

Replies

18
  1. Daniel Staff 10 years, 10 months ago

    Hi Oli_e

    I have tried checking out your site using the url provided, but it does not seem to work. Please update me on this so that I come up with a custom solution for you.

    Looking forward to hearing from you

    Cheers

  2. oli_e 10 years, 10 months ago

    Hey Addo, Oh, there was a mistake with the url. The right URL is http://managementsystem-mal-einfach.de/

  3. Andrew Misplon Staff 10 years, 10 months ago

    It’s a workaround but here is what I suggest.

    Theme Settings > Layout, move to the Logo In Menu option.

    Add the following to Appearance > Custom CSS to remove the constraint placed on the logo in this layout:

    /* Vantage Remove Logo in Menu img constraint */

header#masthead.masthead-logo-in-menu .logo > img {
max-height: none !important;
}

    Create a Custom Menu at Appearance > Menus, add a single Link item, add any url and add your phone number as the link title: Tel. 0711/13203200. Once the link has been added to the menu you can remove the url.

    Add the following to Appearance > Custom CSS to right align the menu:

    /* Vantage right align the main menu */

.main-navigation ul {
font-size: 0;
text-align: right;
}

.main-navigation ul li {
display: inline-block;
float: none;
font-size: 13px;
}

.main-navigation ul ul li { 
text-align: left;
}

    You can now turn sticky on.

    If you let us know when the above is done I can help with centering the logo int he menu.

  4. oli_e 10 years, 10 months ago

    Hi Andrew,
    thx for your fast response.
    It´s done

  5. Andrew Misplon Staff 10 years, 10 months ago

    Thanks. A few things I left out.

    Appearance > Customise > Menu.

    Set the menu background, menu item hover, menu current item background, menu current item hover background, set those all to white to give your menu a white background again (with no change on hover for the phone number).

  6. Andrew Misplon Staff 10 years, 10 months ago

    There is also a menu padding setting there. Use that to add padding as required.

  7. Andrew Misplon Staff 10 years, 10 months ago

    Then to center the logo, add:

    /* Vantage Logo in Menu - Center the Logo */

header#masthead.masthead-logo-in-menu .logo {
  float: none;
  text-align: center;
  margin-right: 0;
}

header#masthead.masthead-logo-in-menu .logo > img {
  display: inline-block;
}
  8. oli_e 10 years, 10 months ago

    It´s done. Is it possible to get my phoneno. in the same line like “Unternehmenskonzepte”?

  9. Andrew Misplon Staff 10 years, 10 months ago

    We can try. Start by remove this last section of CSS I sent.

  10. oli_e 10 years, 10 months ago

    The logo is at the side now

  11. oli_e 10 years, 10 months ago

    I deleted this:

    /* Vantage Logo in Menu – Center the Logo */

    header#masthead.masthead-logo-in-menu .logo {
    float: none;
    text-align: center;
    margin-right: 0;
    }

    header#masthead.masthead-logo-in-menu .logo > img {
    display: inline-block;
    }

  12. Andrew Misplon Staff 10 years, 10 months ago

    Sure, add the following:

    .main-navigation ul li {
  padding-top: 34px;
}
  13. oli_e 10 years, 10 months ago

    looks good and know the logo in the middle :-)

  14. Andrew Misplon Staff 10 years, 10 months ago

    Ahh right, sorry, with you now.

    At the moment I can unfortunately only help you get it like it is now. OR remove the last CSS I just sent and add back the logo centering CSS.

  15. oli_e 10 years, 10 months ago

    I´ll leave it like it is. Do you think you will find a solution to centering the logo?

  16. Andrew Misplon Staff 10 years, 10 months ago

    Thats right. I unfortunately can’t help with both requests. You can either:

    A:
    Have the logo left aligned but with the phone number lining up as required.

    OR

    B: Center align the logo but not align the phone number. To do that you would remove:

    .main-navigation ul li {
  padding-top: 34px;
}

    and add back in:

    /* Vantage Logo in Menu - Center the Logo */

header#masthead.masthead-logo-in-menu .logo {
  float: none;
  text-align: center;
  margin-right: 0;
}

header#masthead.masthead-logo-in-menu .logo > img {
  display: inline-block;
}
  17. oli_e 10 years, 10 months ago

    Thx Andrew, I leave the logo left.

  18. Andrew Misplon Staff 10 years, 10 months ago

    For sure, glad we could sort something out.

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