• A wonderfull light
  • Forest weaving (alt text)
  • Lightning
ZurückWeiter
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 ******/
    width: auto;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}

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