Menu in transparant box with logo area with separate background

Hi,
Thank you for your patience, as I review your request, I believe the only issue right now is switching to the built-in mobile menu before the custom menu becomes too large for the screen, so originally I have said to use the option <strong style=’color:#000′>Hide Header on this page but this also hides the mobile menu, so lets change this to <strong style=’color:#000′>Transparent Header

and hide the header with css:

@media only screen and (min-width: 990px) { 
	#header_main {
		display: none;
	}
}
@media only screen and (max-width: 989px) { 
	.avia_codeblock > #header {
		display: none;
	}
	#menu-item-shop, .responsive.html_mobile_menu_tablet #top .av-logo-container .main_menu .social_bookmarks {
		display: none;
	}
	#av-burger-menu-ul .button.logo {
		display: none;
	}
	.logo a {
		 display: flex;
    align-items: center;
	}
	#header_main {
		background-color: #000;
	}
}
@media only screen and (max-width: 989px) { 
  .responsive #top #main {margin-top: -90px!important;}
  #top #wrap_all .av_header_transparency {background-color: transparent!important;}
  div#header_main > .container {display: block !important;}
  #top .av-burger-overlay li li .avia-bullet, #top .av-hamburger-inner,#top .av-hamburger-inner::before, #top .av-hamburger-inner::after {
  background-color: #fff !important; 
  }
  .html_av-overlay-side-classic #top .av-burger-overlay li li .avia-bullet, .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner, .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::before, .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::after {
  background-color: #000 !important; 
  }
  }

and for my example menu it breaks around 914px so setting the mobile menu to show at 990px in the theme setting will solve this, and I set the <strong style=’color:#000′>Alternate Menu For Mobile to the same menu we used for the shortcode:

So now at 990px and above it looks like this:

and below 989px the mobile menu shows like this:

and when the menu is open:

I believe this is what you are trying to achieve, I linked to my example page below for you to check.

Best regards,
Mike

Hi,
You can change the width of the burger menu at Enfold Theme Options ▸ Main Menu ▸ Burger/Mobile Menu Styling ▸ Flyout Width

To align the button text to the left, try this css:

#av-burger-menu-ul .button.cta.av-menu-button,
#av-burger-menu-ul .button.cta.av-menu-button .avia-menu-text {
	padding-left: 0;
	padding-right: 0;
}

Best regards,
Mike

Hi,
The width of the burger menu is set at Enfold Theme Options ▸ Main Menu ▸ Burger/Mobile Menu Styling ▸ Flyout Width
The default is 500px:

which is like this at 768px:

so you can change it to something else like a percentage, I test 90%:

try to adjust to suit with a percentage that matches your content width percentage.

Best regards,
Mike

Hi,
Sorry, I miss read this, try adding this css:

#menu-test-menu-with-logo {
	width: 100%;
	display: flex;
  justify-content: space-between;
}

Best regards,
Mike

Hi,
To make the custom menu with logo sticky, add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function add_sticky_script(){
    ?>
<script type="text/javascript">
(function($){
      function a() {
          $(window).scroll(function(e){
            var $sticky = $('#menu-test-menu-with-logo');
            var position = ($sticky.css('position') == 'fixed');
            if ($(this).scrollTop() > 25 && !position){
              $sticky.css({'position': 'fixed', 'top': '0px','width' : $sticky.innerWidth() });
              $sticky.addClass('fixed_element_style');
            }
            if ($(this).scrollTop() < 25 && position)
            {
              $sticky.css({'position': 'static', 'top': '0px', 'width' : '' });
              $sticky.removeClass('fixed_element_style');
            }
          });
      }
    
      a();
})(jQuery);
</script>
    <?php
    }
add_action('wp_footer', 'add_sticky_script');

I also added this css so the menu would rest at the top of the screen, previously there was a small space above, on my install.

#header_meta {
display: none;
}
.html_header_transparency #top .avia-builder-el-0 .container{
    padding-top: 58px;
}

If you don’t have a space you won’t need this, if you want to keep the space, adjust the code above.
To make the mobile menu sticky add this css:

@media only screen and (max-width: 989px) {
  .responsive.html_mobile_menu_tablet #top #wrap_all #header {
    position: fixed;
  }
}

Best regards,
Mike

Hi,
This sounds like a z-index issue, but I would need to see your site as I can’t reproduce this on my site.
Please let us know when your site is online so we can see it.

Best regards,
Mike

Hi,
Thank you for your patience, I didn’t see an issue on the page that you linked to, but I found a another page with the issue, indead it was a z-index issue, so I added the custom class section-with-menu to the color section with the menu shortcode:

and added this css to your Quick CSS:

.avia-section:not(.section-with-menu) {
z-index: 0;
}
.avia-section.section-with-menu {
z-index: 2;
}

and this seems to have helped, please check the page below and try to make this adjustment to your other pages.

Best regards,
Mike

Hi,
Please note, on this page with the image behind the menu:

you are using a color section with a background image and the menu in the code block element:

but on the portfolio page you have a color section with a no background image and the menu in the code block element, and a slider below.

So adds a new challenge :( The solution seems to be to add the custom class section-with-menu-no-background and this css:

.avia-section:not(.section-with-menu-no-background) {
z-index: 0;
}
.avia-section.section-with-menu-no-background {
z-index: 50;
position: absolute;
background: transparent;
}

I did this for you, please check.

Best regards,
Mike

Hi,
#3 try this css:

#top #header .av-main-nav > li.button.logo > a {
	font-size: 0;
}

#4

.av-main-nav ul li {
    list-style-type: none;
}

Best regards,
Mike

Hi,
Thanks for your patience, when I check the menu is within a couple of px of the page content. It is currently set to 100% and changing any higher makes it too large.
I will need to investigate more.

Best regards,
Mike