Home>Support>Logo Overlap Menu

Logo Overlap Menu

Hey guys,

First off keep up the good work. I have been messing around with the logo in the menu option and I unfortunately cannot get the look I am after. The logo in use just does not work at the scale of the menu bar, and I also do not want to scale up the height of the menu bar, creating large space above and below the menu text.

SO my question or idea, rather, is to have the logo overlap, so to speak, the edges top and bottom of the menu and spill into the header area and lower body slightly. I have tried the logo in the header, but it looks rather cheesy and lonely up there, and I just know that what I see in my head would be a stronger visual style, but I just cannot seem to find the right combination of settings and possible custom css.

Thanks again.

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

    Hi Tyler

    Thanks for running Vantage Premium.

    If you’re running the Logo in Menu option you can insert the following under Appearance > Custom CSS to remove the image constraint:

    /* Remove Logo in Menu image constraint */
    
    header#masthead.masthead-logo-in-menu .logo > img {
    max-height: none !important;
    }

    Pushing your logo just a little larger might resolve this issue.

    Alternatively, if you run the regular masthead consider using Appearance > Widgets: Header to insert header widget content. There is styling ready for the Custom Menu widget so if you have lots of pages you can insert a secondary menu in the header widget area.

  2. 10 years, 3 months ago Tyler Gallagher

    Thanks for the response. I understand the header/ custom menu work around, but I was hoping to keep the Vantage menu, I like the look and functionality plus its customization.

    After placing the custom css, the logo did appear in the menu and to the full 175×175 dims that i had created it. But the menu also stretched in height and did not allow the overlap idea that I had intended. Is there anything to do besides center the text in the over sized menu bar? Or could I somehow get the effect similar to how this logo is overlapping the header ( http://noblefishingcharters.com/ ). Upon invest, I discovered that this referenced site uses an image as a header, and the logo is part of a photoshopped .png is all i can assume.

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

    When using the Logo in Menu option the logo exists in the normal document flow so it’s not possible to overlap anything without changing that behaviour. It’s unfortunately not something we can quickly assist with and would be a custom development task, we recommend http://codeable.io if you’re interested in getting an estimate for something like that.

    So right now it would be a choice between the Logo in Menu option, Logo in Menu with no constraint on the image (using the CSS I sent through) OR the regular masthead option with a header sidebar to the right or finally the regular masthead with a centred logo.

    Sorry I don’t have more here.

  4. 10 years, 3 months ago Tyler Gallagher

    No problem. You’ve helped me out plenty with all the information. Thanks again.

  5. 10 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Thanks for your understanding. All the best with your project.

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