Center Logo and Center Menu?

13 posts from 4 voices

• Started 5 months ago by evopanop
• Latest reply from Devin
• This topic is not a support question

Tags:

No tags yet.

1. 

   evopanop
   Member

   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! :)

   Posted 5 months ago #
2. 

   Ismael
   Moderator

   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

   Posted 5 months ago #
3. 

   evopanop
   Member

   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.

   Posted 5 months ago #
4. 

   Ismael
   Moderator

   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

   Posted 5 months ago #
5. 

   evopanop
   Member

   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!

   Posted 5 months ago #
6. 

   evopanop
   Member

   Nevermind, Ismael. Figured it out.

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

   Thanks again for all of the help! :)

   Posted 5 months ago #
7. 

   Ismael
   Moderator

   Hi evopanop,

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

   Cheers,
   Ismael

   Posted 5 months ago #
8. 

   AlainTernet
   Member

   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

   Posted 3 months ago #
9. 

   Ismael
   Moderator

   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

   Posted 3 months ago #
10. 

    AlainTernet
    Member

    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;
    }

    Posted 3 months ago #
11. 

    Ismael
    Moderator

    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

    Posted 3 months ago #
12. 

    AlainTernet
    Member

    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

    Posted 3 months ago #
13. 

    Devin
    Moderator

    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

    Posted 3 months ago #

RSS feed for this topic

Reply

You must log in to post.