Hi,
Try adding the CSS in the Enfold Theme Options ▸ General Styling ▸ Quick CSS field

Best regards,
Mike

Hi,
All I can say is it’s working for me…

Best regards,
Mike

Hi,
When testing for different devices on your desktop browser you will need to reload the page when you chage the screen width, this will not be an issue for real devices because their screen sizes don’t change in the same way after page load.
Adding a listener to the page only for testing is not a good idea.

Best regards,
Mike

Hi,
Yes you can adjust the css to suit, glad to hear you like this.

Best regards,
Mike

Hi,
Try adding this css:

.account-menu {
	z-index: 3;
}

then clear your browser cache.

Best regards,
Mike

Hi,
You can change the font size in the Enfold Theme Options ▸ Advanced Styling for menu items, but the flag is a very small icon, so you can’t make it larger.

Best regards,
Mike

Hi,
Please check that you clear your cache, it is working for me.

Best regards,
Mike

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

Best regards,
Mike

Hi,
I tried adding a images to the portfolio item that you liked to in your post above as the one with the issue, and it showed the difference when I saved it and also when I removed it again. I see that you have a few plugins disabled so I assume that you figured out the ones causing the error.
Did you need any further help with this issue?

Best regards,
Mike

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

Hey Stilecatalini,
Your menu items a white text on a black background, please explain further what you want to change, perhaps a mockup would help.

Best regards,
Mike

Hi,
That is good news :)

Best regards,
Mike

Hey ariane1001,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.slide-entry-wrap a:hover img {
	animation: zoom 2s;
	animation-fill-mode: forwards;
}
@keyframes zoom {
  to {
      transform: scale(1.2)
  }
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for your patience, I see that you are using the Code Snippets plugin so I will add the customizations in it,
I also see that you are using the heading setting Logo left, menu below, I disabled the Shrinking Header because it didn’t give enough room for the search box. The following code will only show the search bar on screens larger that 990px when there is enough room.
So first I added the function to add the widget to the header as a code snippet:

add_action( 'ava_main_header', 'enfold_customization_header_widget_area' );
function enfold_customization_header_widget_area() {
dynamic_sidebar( 'header' );
}

Then the custom header widget with a search widget:

then I added this code to place the widget after the logo in the header:

function header_widget_placement() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
  (function($){
    var width = $(window).width();
    if ((width >= 990)) {
   $('#header_main .widget').detach().insertBefore('.av-logo-container .inner-container #menu-item-shop');
    } else {}
  })(jQuery);
});
 </script>
  <?php
}
add_action('wp_footer', 'header_widget_placement', 99);

then this css to style and order the header elements:

@media only screen and (max-width: 989px) {
	#header_main > .widget {
	display: none;
}
}	
@media only screen and (min-width: 990px) {
.av-logo-container .inner-container {
	display: flex;
    flex-direction: row-reverse;
}
.av-logo-container .inner-container .widget {
	display: flex;
    order: 3;
    flex-basis: 65%;
}
#header_main > .widget {
	display: none;
}  
.av-logo-container .inner-container .widget #searchform {
	 width: 100%;
}
.av-logo-container .inner-container .widget #searchform .ajax_search_response {
	background-color: #fff;
    z-index: 3;
}
.av-logo-container .inner-container #menu-item-shop {
	display: flex;
    order: 2;
}
}

This is the final result:

Best regards,
Mike

Hi,
Glad we were able to help, 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