logo at center and above the submenu

Hey Stilecatalini,
I carefully examined your site and came up with a way to center your logo for all device sizes and for it to show in the same place when the menu is open.
This is the logo before the menu is open:

and this is with the menu open the logo shows in the same place:

Add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function show_logo_in_burger_menu() { ?>
  <script>
(function($){
$('#avia-menu').one('click', function(){
jQuery('.logo.avia-standard-logo').clone().wrapInner('<div class="burger-logo"/>').children(0).unwrap().prependTo('#av-burger-menu-ul');
});
})(jQuery);
</script>
  <?php
}
add_action('wp_footer', 'show_logo_in_burger_menu', 99);

and this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (min-width: 990px) { 
	.logo.avia-standard-logo,
	.logo.avia-standard-logo a {
		display: flex;
	    justify-content: center;
	    width: 100%;
	    align-items: center;
	}
	.av-burger-overlay-active .burger-logo {
		top: 30px;
	    position: absolute;
	    justify-content: center;
	    display: flex;
	    width: 100%;
	}
}
@media only screen and (max-width: 989px) {
	.responsive #top .logo {
		width: 100%;
		display: flex;
		justify-content: center;
        align-items: center;
	}
	.responsive #top #wrap_all .main_menu,
	.responsive #top #wrap_all .av_mobile_menu_tablet .main_menu {
    	top: 11px;
    	height: 55px;
	}
	.av-burger-overlay-active .burger-logo img {
		height: 30px;
    	max-height: 30px;
    	width: 155.17px;
	}
	.av-burger-overlay-active .burger-logo {
		top: 25px;
	    position: absolute;
	    justify-content: center;
	    display: flex;
	    width: 100%;
	}
}
@media only screen and (min-width: 768px) and (max-width: 989px) { 
	.responsive.html_header_transparency.html_header_top #top #main {
    	margin-top: -70px;
	}
	.responsive #top .logo {
    	height: 80px !important;
	}
}

Best regards,
Mike

Hi,
No you need to put the code in, and yes it works on mobile.

Best regards,
Mike

Hi,
Yes it will.

Best regards,
Mike

Hi,
It looks like you didn’t add the code above to center the logo, I added it for you and now the logo is centered.
This doesn’t include adding a mail icon, please start a new topic for that request.

Best regards,
Mike

Hi,
Sorry, I don’t understand what you mean, we are talking about the logo being centered and showing when the burger menu is open, so just like my original screenshots above, on mobile the logo is centered:

and when the menu is open the logo shows centered:

Please note that you should test after clearing your cache and while logged out because the admin topbar that shows when you are logged in will displace the menu and logo.

Best regards,
Mike

Hi,
To have very large menu items and align them at the top try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #av-burger-menu-ul {
	vertical-align: top;
}
@media only screen and (max-width: 767px) { 
#av-burger-menu-ul .avia-menu-text {
	font-size: 60px;
}
}
@media only screen and (min-width: 767px) { 
	#av-burger-menu-ul .avia-menu-text {
	font-size: 80px;
}
}

feel free to adjust to suit, this is the expected results:

Since the original question has been answered we will close this thread as it has now covered multiple topics, please note that we ask each thread to limit to one topic.
If you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike