Top header menu display

[JulienB]

Hi there,

See attached screenshot of our homepage. I wonder what is the best way to get the header menu items to stick around the logo with the same spacing? (right now the 2 menu items on the left hand side are far apart compared with the 3 on the right).

Thanks

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
There are 10 header types, just go to Admin > Theme Options > Header Options > Choose header type as you like.
Thanks
Mohammad

[JulienB]

Thanks. I have indeed already chosen the header I want (logo in the middle) however as soon as you don’t have an even number of menu items on both side, items start to overlap with the logo. I’ve reduced the font size through CSS but ultimately I guess I should change the padding but did not success to do so. Is there a a way to affect menu padding/margin in the backend?

[Mohammad – SUPPORT]

Hi,
Please use this custom css code to adjust the padding between menu items:-

.full-center nav.float-alt-menu ul.menu > li > a, .full-center #header nav.std-menu ul.menu > li > a {
    padding: 0 5px 0px 6px !important;
}

Thanks
Mohammad

[JulienB]

Thanks Mohammad. I’ve tried playing with the code you gave me but it changes the padding on all menu items. In fact the only thing I find strange is the space between the logo and menu item “our story” (see http://www.toojah.com) – it’s a lot bigger than between the logo and the menu item “Thainess Guide” which makes the logo look not center. On the preview of your header styles it shows similar spacing between the logo and menu items on both sides. I’ve tried playing with the margins / padding of the logo on CSS but it’s already set to 0 everywhere. Is that the normal layout? On all your demos it looks different. Thx

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

#logo{
margin-left: -127px ! important;
}

Thanks
Mohammad

[JulienB]

Thx for the code Mohammad. It moves the logo to the left (which then makes the logo not aligned with the rest of the page anymore). In fact what I am trying to do is to move the header items on the left hand side more towards the logo (as it shows on all your templates). I am not sure why it is misaligned this way originally.

[Rui Guerreiro – SUPPORT]

Hi,

Can you provide a mockup image of how you will like it to be. Guess it’s easier this way.
Thanks

-Rui

[JulienB]

sure thing. See attached with red/blue arrows to explain.
Basically, just move both menu items on the left as close to the logo as the items on the right. As it looks on your demo (see attached)

Thanks

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.full-center nav#main-navigation ul.menu > li.menu-item-48{
margin-right:210px !important;
}

ul#menu-main-menu-1{
margin-right:-110px !important;
}

Thanks
Mohammad

[JulienB]

Awesome this made the trick. Thanks a lot Mohammad !

[Mohammad – SUPPORT]

Hi,
Glad 🙂 to help you.
Thanks
Mohammad