Drop down block above Main Menu

Hey karmenka,

Thank you for the inquiry.

That option is not available by default but you can start with the following modifications. First, add this code in the functions.php to create a new container and the toggle button above the header.

add_action("ava_main_header", function() {
	echo "<div class='av-widgets-wrapper-button'>Click Here</div>";
	echo "<div class='av-widgets-wrapper'>Content</div>";
}, 10, 1);

Then use this script to toggle the display of the widget wrapper when the button is clicked.

function ava_header_widget_wrapper_toggle(){
  ?>
  <script>
        (function($) {
          $(".av-widgets-wrapper-button").on("click", function() {
			var button = $(this);
			var wrapper = $(".av-widgets-wrapper");
			var active = wrapper.is(".active");

			if( ! active ) {
				wrapper.slideDown();
				wrapper.addClass("active");
				button.css("top", 200);
			} else {
				wrapper.slideUp();
				wrapper.removeClass("active");
				button.css("top", "");
			}
		  });
        })(jQuery);
  </script>
  <?php
}
add_action('wp_footer', 'ava_header_widget_wrapper_toggle');

This is the starting css code.

.responsive #top #header .av-widgets-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100vw;
  height: 200px;
  display: none;
  z-index: 999;
  background: red;
}

.responsive #top #header .av-widgets-wrapper-button {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 45px 45px 0;
  border-color: transparent;
  position: fixed;
  z-index: 801;
  right: 0;
  top: 0;
  cursor: pointer;
  border-right-color: #545454 !important;
  z-index: 9999;
}

If you want to display widgets in that area, you will have to use the dynamic_sidebar function.

// https://developer.wordpress.org/reference/functions/dynamic_sidebar/

Best regards,
Ismael

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic.

Best regards,
Rikard