Logo Center with Button on Left (Header Widget) & Hamburger Menu on Right

Hi,

Thank you for the inquiry.

Set the default logo to the default option, that is logo to the left and menu to the right, then use this css code in the Quick CSS field to move the logo in the center of the header container.

.av-logo-container .logo {
    left: 50%;
    transform: translateX(-50%);
}

Best regards,
Ismael

Hi,

Thank you for the update.

1.) You have to create more css media queries to adjust the style of the logo on mobile view, or to apply the previous css code on larger screens only. Example.

@media only screen and (min-width: 989px) {
   .av-logo-container .logo {
      left: 50%;
      transform: translateX(-50%);
   }
}

This should apply the changes only on screens wider than 989px.

2.) For the header effect, try to use this script in the functions.php file to toggle the header class attribute on scroll.

function ava_header_on_scroll(){
	?>
	<script>
 (function($) {
    $(window).on("scroll", function() {
        if($(window).scrollTop() < 50) { 
          $("#header").removeClass("with-background");
        } else {
          $("#header").addClass("with-background");
        }
    });
})(jQuery);
	</script>
	<?php
}
add_action('wp_footer', 'ava_header_on_scroll');

Then use this css code to apply the black background.

#header.with-background {
    background-color: #000000 !important;
}

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael