Centering Your Logo In the Navigation

There are two ways to center the logo and split the menu items in half using GeneratePress. The implementations of the two methods are quite similar so it maybe worth trying both and decide which effect you prefer. 

Using the Header

Using the header method allows you to control the logo height separate from the menu item height as the screenshot above.

  1. Add the logo inĀ Site Identity.
  2. Set the Navigation Location to Float Right.
  3. Enable the Mobile Header feature and upload a mobile header logo.
  4. Select the Menus you want to implement this method.
  5. Add a custom link and CSS class as the screenshot below:
  6. Position the Menu Item Separator created above where you want the logo to show up and the navigation to split.
  7. Add the following CSS
    .inside-header {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-align: center;
    	    -ms-flex-align: center;
    	        align-items: center;
    }
    
    .header-widget {
    	order: 10;
    	overflow: visible;
    }
    
    .nav-float-right .header-widget {
    	top: auto;
    }
    
    .nav-float-right .header-widget .widget {
    	padding-bottom: 0;
    }
    
    .site-branding,
    .site-logo {
    	position: absolute;
    	left: 50%;
    	-webkit-transform: translateX(-50%);
    	        transform: translateX(-50%);
    	z-index: 200;
    }
    #mobile-header .mobile-bar-items {
    	-webkit-box-ordinal-group: 5;
    	-ms-flex-order: 4;
    	order: 4;
    	margin-left: auto;
    }
    #site-navigation {
    	float: none;
    	width: 100%;
    }
    
    .main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    }
    
    .main-navigation .menu-item-separator {
    	-webkit-box-flex: 1;
    	    -ms-flex-positive: 1;
    	        flex-grow: 1;
    }
    
    .main-navigation .menu-item-separator a {
    	font-size: 0;
    	background: transparent !important;
    }
    
    .slideout-navigation .menu-item-separator,
    .main-navigation.toggled .menu-item-separator{
    	display: none !important;
    }
    
    @media (max-width: 768px) {
    	.inside-header>:not(:last-child):not(.main-navigation) {
    		margin-bottom: 0;
            }
    }

Using the Navigation as a Header

Using the navigation as a header method will make the logo height the same as the menu item height.

  1. Follow every step in this article to set up the navigation as a header.
  2. Proceed starting from step 3 above.