Hi, I would like to center the logo in the menu. I have found the option although the logo is above the menu. I would like to have the logo centralised between the links of the menu (they are 4 so would be 2 each side)
See example:
Hello,
I don’t think that there is an easy way to do it, unfortunately.
Please feel free to ask any other questions that you might have.
Kind Regards, Roman.
Hello there,
- Log into your site admin area
- Go to Appearance > Customize > Header area > Menu style > Menu style > enable Centered. Save
- Navigate to Appearance > Menus
- Edit your current active primary menu
- Create a new custom links menu item. In the URL field, enter #logo. In the “Navigation Label” field, put any text of your choice, e.g. your site name. Then place it in the middle of other menu items.
- Update menu
Then do the below steps:
- Install and activate the TC Custom JavaScript plugin
- Go To Appearance > Custom JavaScript
- Paste the following code into the provided box
jQuery(function($) {
var middleMenu = $('a[href="#logo"]');
var logo = $('.site-header .col-md-4 > a').html();
if ( matchMedia( 'only screen and (min-width: 1025px)' ).matches ) {
if(middleMenu.length){
middleMenu.parent('li').addClass('site-logo-middle-menu');
$('.site-header .col-md-4 > a').remove();
middleMenu.html(logo);
}
}
if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {
middleMenu.parent('li').remove();
}
});
- Update
- Add the below CSS code to Appearance > Customize > Additional CSS from dashboard.
.site-logo-middle-menu{
margin-left: 40px;
margin-right: 40px;
}
.site-logo-middle-menu:after {
display: none;
}
Regards,
Kharis
It is almost good. I have the logo between the two links, but l noticed that the additional CSS didn’t change anything, and I wanted the logo over hanging the menu, and about 100% bigger. Any way to fix it? I have the settings as you told me. Im attaching a picture so you can see how it is looking now.
I also want the logo to shrink when I scroll down and stay in the middle in the fixed menu. Is it possible? You can see a great example here: http://academiadejogos.com.br/
Hello there,
Try adding the below extra CSS code:
.site-logo {
max-height: 170px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.float-header .site-logo {
max-height: 80px;
}
Regards,
Kharis
Hello there,
It looks like you’ve applied
.site-logo {
max-height: 80px;
}
that works good now. Is that correct?
Regards,
Kharis
No, the logo is on a good size now but the menu is too big. I would like the logo to be over hanging the menu like in this example: www.academiadejogos.com.br
What I have in Additional CSS is:
.site-logo-middle-menu{ margin-left: 20px; margin-right: 20px; } .site-logo-middle-menu:after { display: none; }.site-logo {
max-height: 180px;
-webkit-transition: all 0.8s;
transition: all 0.80s;
}.float-header .site-logo { max-height: 80px; }
And it looks like this:
Hello there,
Please try adding this CSS code:
@media only screen and (min-width: 1025px) {
.site-header {
height: 90px;
}
.site-header .col-md-8,
.main-navigation .menu {
height: 1px;
}
.header-clone {
display: none;
}
}
Regards,
Kharis
