• A wonderfull light
  • Forest weaving (alt text)
  • Lightning
123

Logo centered to the menu

best presetting will be logo left – menu right

you see on the script snippet, that the whole logo-container is taken for inserting it to a menu-position calculated as the center position (if you have odd menu-items – there will be less items on the left side of the logo).

/****** logo left - menu right ( or vice versa ) *******/

function logo_to_navigation(){
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { 	
(function($) {
  var numItems = $("#avia-menu .menu-item.menu-item-top-level").length;
  var insertionPlace = parseInt(numItems / 2);
  var insertLogo = $('#header .av-logo-container .logo').html();
  $("#avia-menu .menu-item-top-level-"+insertionPlace+"").after( "<li id='menu-item-logo' class='menu-item menu-item-top-level'>"+insertLogo+"</li>" );
})(jQuery);
}); 	
</script>
<?php
}
add_action('wp_footer', 'logo_to_navigation');

on odd menu-items count : If you like to have more items on the left just change the part of the insertionPlace.

var insertionPlace = (parseInt(numItems / 2) + 1);
@media only screen and (min-width: 768px) {
	#top .av-logo-container .logo {
		opacity: 0;
	}
	#top .main_menu {
		left: 0;
		width: 100%;
	}
	#top .main_menu .avia-menu.av-main-nav-wrap {
		position: relative;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	#top #menu-item-logo svg,
	#top #menu-item-logo img {
		max-height: 70px;   /**** depends on your choosen header height - on shrinking headers it will be set by that enfold shrink script ******/
		position: relative;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
}

#av-burger-menu-ul .menu-item-logo {
	display: none
}