Center the logo

What is the best way to center the logo horizontally inside of the header on top of the pages?

Hello there,

Visit menu administration panel from dashboard, then insert a custom link to your active main menu and place it in the middle. In the URL box enter #logo and choose any name for the label.

08

34

Update.

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-branding > a').html();

      if ( matchMedia( 'only screen and (min-width: 1025px)' ).matches ) {
        if(middleMenu.length){

          middleMenu.parent('li').addClass('site-logo-middle-menu');
          $('.site-branding > a').remove();
          middleMenu.html(logo);

        }
      }

      if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {

        middleMenu.parent('li').remove();

      }

    });
  1. Update
  2. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.
    @media only screen and (min-width: 1025px) {
      .site-header .container {
        display: block !important;
      }
      .site-header .site-branding.col-md-4,
      .site-header .main-navigation.col-md-8 {
        width: 100%;
        float: left;
      }
      .site-header .main-navigation ul.menu {
        float: none;
        display: table;
        margin-left: auto;
        margin-right: auto;
      }
      .main-navigation ul.menu li.site-logo-middle-menu a {
        position: relative;
        margin-top: -20px;
      }
      .main-navigation ul.menu li.site-logo-middle-menu > a:before,
      .main-navigation ul.menu li.site-logo-middle-menu > a:after {
        display: none;
      }
      .main-navigation ul.menu li.site-logo-middle-menu img {
        max-width: 160px;
        height: auto;
      }
    }

Regards,
Kharis

Thank you very much! It works well!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis