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 not centering when in menu

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

Need fast email support? Get SiteOrigin Premium

Replies

8
  1. Daniel Staff 11 years, 9 days ago

    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. Mitz 11 years, 9 days ago

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

  3. Mitz 11 years, 9 days ago

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

    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. Mitz 11 years, 7 days ago

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

    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. Mitz 11 years, 7 days ago

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

    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.

Have a different question or issue?

Start New Thread