Centralised Header Menu

[caue_marganelli]

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:

[roman]

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.

[kharisblank]

Hello there,

1. Log into your site admin area
2. Go to Appearance > Customize > Header area > Menu style > Menu style > enable Centered. Save
3. Navigate to Appearance > Menus
4. Edit your current active primary menu
5. 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.

6. Update menu

Then do the below steps:

1. Install and activate the TC Custom JavaScript plugin
2. Go To Appearance > Custom JavaScript
3. 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();

      }

    });

4. Update
5. 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

[caue_marganelli]

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/

[kharisblank]

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

[caue_marganelli]

.site-logo {
max-height: 170px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

.float-header .site-logo {
  max-height: 80px;
}

It gets bigger, but it pushes the other links, see screenshot
Thanks for being helping me!

[kharisblank]

Hello there,

It looks like you’ve applied

    .site-logo {
        max-height: 80px;
    } 

that works good now. Is that correct?

Regards,
Kharis

[caue_marganelli]

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

[caue_marganelli]

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:

[kharisblank]

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

[caue_marganelli]

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

Almost there. The links are not readapting, they are in the same line as the logo so they are off the header.

See Screen shot. I have highlighted so you can see where the links are (they’re white)