Center the primary-menu in the one-page template

Hello,

This is certainly possible however some Customized Code will be required. Please follow the steps below to apply this to your Header:

• Add the following CSS Code preferably in the css/custom.css File and link this CSS File in your header as described in the Documentation > Start > Customization Section:

@media (min-width: 992px) {
	#primary-menu {
		float: left;
		max-width: none;
		text-align: center;
		line-height: 0.85;
	}

	#header.full-header #primary-menu > ul {
		display: inline-block;
		float: none;
		text-align: left;
		border-right: 0;
	}

	#logo-2 {
		position: relative;
		float: right;
		font-family: 'Raleway', sans-serif;
		font-size: 36px;
		line-height: 100%;
		margin-left: 40px;
	}

	#header.full-header #logo-2 {
		padding-left: 30px;
		margin-left: 30px;
		border-left: 1px solid #EEE;
	}

	#logo-2 a {
		display: block;
		color: #000;
	}

	#logo-2 img {
		display: block;
		max-width: 100%;
	}
}

• Add the following JS Code at the bottom of the Page just after the js/functions.js File Linking:

	function primaryMenuResizer() {
		var mainLogo = jQuery('#logo').outerWidth(),
			secondLogo = jQuery('#logo-2').outerWidth(),
			containerWidth = jQuery('#logo').parent('.container').width(),
			primaryMenu = jQuery('#primary-menu'),
			primaryMenuWidth = containerWidth - ( mainLogo + secondLogo + 60 );

		if( jQuery('body').hasClass('device-lg') || jQuery('body').hasClass('device-md') ) {
			primaryMenu.css({ 'width': primaryMenuWidth });
		} else {
			primaryMenu.css({ 'width': '' });
		}
	}

	jQuery(window).load( function(){
		primaryMenuResizer();
	});

	jQuery(window).resize( function(){
		primaryMenuResizer();
	});

• Now you can simply add the following HTML Code for the Second Logo in the #header Container just after the #primary-menu Container:

	[
![attachment](images/logo.png)
](index.html)

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.