Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #18743

    Hi, how would I go about centering the Logo and centering the Main Menu? (Centering them Horizontally across the Width of the page, not Vertically) I’ve looked through the CSS, but I’m just not positive which line of the code is centering those two items?

    Thanks in advance! :)

    #100697

    Hi evopanop,

    Try to add this code on your Quick CSS (Replete > Styling) or the custom.css file (located in the css folder in the theme’s folder):

    @media only screen and (min-width: 960px) {
    .logo.bg-logo,
    #menu-main-menu {
    position: relative;
    left: 50%;
    }

    .logo.bg-logo {
    margin-left: -140px;
    }

    #menu-main-menu {
    margin-left: -175px;
    }
    }

    This is based on the demo theme. For the logo adjust the margin-left value in .logo.bg-logo (the value depends on the width of your logo, the value you will add is -(half the width of your logo)px. For the main menu, also adjust the margin-left value (we cannot auto center the menu with the current layout. Hope this helps. :)

    Regards,

    Ismael

    #100698

    Hi Ismael,

    Thanks for the quick reply! That worked great for the menu, but didn’t move the Logo at all. Any ideas?

    Here is the page:

    http://tadcllc.com

    Also, where in the PHP code do I need to go to remove the “Featured Products, Recent Collections, Recent Blog Entires, and Logos” areas from the Home Page of the site? I just want to remove those from the home page altogether.

    #100699

    Hi evopanop,

    Try changing the code I gave you with this code:

    @media only screen and (min-width: 960px) {
    .logo.bg-logo,
    #menu-main-menu {
    position: relative !important;
    left: 50% !important;
    }

    .logo.bg-logo {
    margin-left: -140px !important;
    }

    #menu-main-menu {
    margin-left: -175px !important;
    }
    }

    The !important I have added ensures that the css code won’t be overwritten with other styles. For these items, “Featured Products, Recent Collections, Recent Blog Entires, and Logos” , inside your WP Dashboard, go to Replete > Template Builder > Frontpage. You can see the frontpage elements there, just remove it. :)

    Regards,

    Ismael

    #100700

    Hey Ismael,

    Thanks! The Template Builder section was exactly what I was looking for. Can’t believe I didn’t notice that sooner, lol.

    Adding the !important to each line still didn’t make the Logo centered. I’ve even tried putting that CSS code you provided into the custom.css and it still isn’t working for the Logo. The menu centers just fine, though. Doesn’t make any sense… Am I missing something? lol

    Thanks again in advance!

    #100701

    Nevermind, Ismael. Figured it out.

    The .logo.bg-logo needed to be .logo img

    Thanks again for all of the help! :)

    #100702

    Hi evopanop,

    Glad that we could help, and it’s great that its fixed now. :)

    Cheers,

    Ismael

    #100703

    Hi,

    I try to put the logo at center too, but that does not work with the Ismael code above.

    And I dont understand the “evopanop” comment (The .logo.bg-logo needed to be .logo img)

    Can someone clarify this ?

    I use the “boxed” layout and I tried this code with imperfect result:

    .logo {

    position: relative;

    left: 50%;

    }

    Alain

    #100704

    Hi Alain,

    Check the code I gave above, you should notice this on them:

    .logo.bg-logo

    just replace it with

    .logo img

    Hope this helps.

    Regards,

    Ismael

    #100705

    I just edited my post to add some info during you send a reply ;-)

    I use the “boxed” layout and I tried this code with partial result (not exactly centered):

    .logo {

    position: relative;

    left: 50%;

    }

    I tried your code like above and the logo disappear…

    @media only screen and (min-width: 960px) {

    .logo img {

    position: relative !important;

    left: 50% !important;

    }

    .logo img {

    margin-left: -140px !important;

    }

    #100706

    Hi Alain,

    Have you adjusted the margins? I have mentioned this above:

    This is based on the demo theme. For the logo adjust the margin-left value in .logo.bg-logo (the value depends on the width of your logo, the value you will add is -(half the width of your logo)px. For the main menu, also adjust the margin-left value (we cannot auto center the menu with the current layout. Hope this helps. :)

    So you should adjust it. If you still had a hard time, kindly post a link to your site, so we can assist further.

    Regards,

    Ismael

    #100707

    Thanks Ismael,

    I read your text again, and tried again but it still does not work properly …

    So, I reset my code. My url site is: http://www.vestiges.ca

    Thanks for your help!

    Alain

    #100708

    Hi Alain,

    Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    #top #header .logo {
    left: 50%;
    margin-left: -68px;
    }

    Regards,

    Devin

Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘Center Logo and Center Menu?’ is closed to new replies.