Two color Logo area – menu below

Hi,

Thanks for that, it looks like there just isn’t enough room for you to show your buttons on smaller screens. I would suggest you create a Color Section to show only on mobile and place the buttons there instead. You can give you section an id in the options of the element then hide it on all screens except mobile using the following CSS:

@media only screen and (min-width: 768px) {
#your-id {
display:none;
}
}

Then hide the header widget with the following:

@media only screen and (max-width: 767px) {
#text-3 {
display:none;
}
}

Thanks,
Rikard

Hi,

Please add this in the functions.php file:

add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script type="text/javascript">
(function($) {
	function c() {
		var isMobile = '';

		if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && 'ontouchstart' in document.documentElement)
		{
			isMobile =  true;
		}
		else
		{
			isMobile =  false;
		}

		if(!isMobile) return;

		var widget = $('#header .widget').detach();
		$('#main').prepend('<div id="header_main_alternate_mod" class="container_wrap"><div class="container"></div></div>');
		$('#main #header_main_alternate_mod').prepend(widget);
	}

	c();
})(jQuery);
</script>
<?php
}

This will move the widget below the header on mobile view. You can style the new section with the following selector.

#header_main_alternate_mod {
   /* style here */
}

Best regards,
Ismael