Home>Support>Logo not centering when in menu

Logo not centering when in menu

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

Hi there, sorry if this has been asked recently.

Basically I am trying to center the logo for a website I am currently working on. I am using the premium vantage theme and I have logo in menu masthead feature set, also under customization > general I have center logo checked. Is there away to center the logo when I have the logo in menu choice active?

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, 7 months ago Daniel
    Hi, I Work Here

    Hi Mitesh,

    Would you mind proving a direct link to your site so that I come up with a custom solution for you.?

    Looking forward to hear from you

    Cheers

  2. 9 years, 7 months ago Mitz

    Of course:
    http://www.dimensioninstore.com

  3. 9 years, 7 months ago Mitz

    To be a little more clear I want to center my logo while moving the navigation to the right of the logo.

    Thanks again for any help

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

    Hi Mitesh

    Thanks for reaching out. As you noticed, the Center Logo setting isn’t currently applicable when used with the Logo in Menu masthead layout option.

    The following inserted under Appearance > Custom CSS will center the logo:

    /* Vantage Logo in Menu Center the Logo */

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

    And the following will 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;
}

    Hope that helps.

  5. 9 years, 7 months ago Mitz

    Hi there, thanks for getting back to me.

    The code to move the navigation to the right works wonders thank you so much for that!

    The code to align the logo to the center on the other hand didn’t work I’m afraid, it moved the logo above the menu so it was on a separate line like using a line break, it was also still aligned to the left and hadn’t moved to the center. I tried removing the float and width properties and I was left with the logo being on the same line as the navigation but still only centered to the left.

    I then used this to move the logo to the center:

    header#masthead.masthead-logo-in-menu .logo {
margin-left:40%;

    it works when viewed on a monitor with the browser window set to full screen, but when I then drag the browser window to make it smaller the logo jumps back to the left side of the page.
    Any suggestions? Again thank you for any help!

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

    Sure, try this for this logo instead:

    header#masthead.masthead-logo-in-menu .logo {
float: none;
position: absolute;
right: 50%;
margin-right: -10px;
}

    Set the negative right margin value equal to the image width of your logo.

  7. 9 years, 7 months ago Mitz

    Andrew, you legend, that worked for the most part.

    I removed the margin-right line and changed the navigation size for when it changes to mobile navigation and I was able to get it to work without the navigation floating over the logo.

    Thank you very much for all your help it’s greatly appreciated!

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

    Super, glad that mostly did the trick :)

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