Full screen hamburger menu with video background - Support | Kriesi.at

Tagged: gunter, Hamburger-Menu, yigit

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
April 14, 2023 at 4:13 pm #1404462

goldengate415
Participant

Hi all,

I am wondering if it’s possible to have a hamburger menu like this:
https://milano.beantown.website/freelancer/

It’s a full-screen hamburger menu with a video background… I love the look.

Thanks,
Rob

PS If this is not yet possible with Enfold, perhaps can be considered for a future enhancement?

April 16, 2023 at 11:06 am #1404575

Rikard
Keymaster

Hi Rob,

There’s nothing like that in the theme by default at the moment unfortunately. We will consider this feature for a future release of the theme though :-)

Best regards,
Rikard

April 16, 2023 at 10:32 pm #1404633
Guenni007
Participant
you see on your example page they are working with self hosted html5 videos. You could insert them on enfold burger overlay via script.
you had to be sure that the html insertion is on one line :
( a line-break inside that append – will break the script )
<video autoplay="" loop="" class="video_style" style="width: 1636px; height: 920px; top: 0px; left: -72.5px;"><source src="https://milano.beantown.website/wp-content/uploads/menu.m4v" type="video/mp4"><source src="https://milano.beantown.website/wp-content/uploads/menu.webm" type="video/webm"><source src="https://milano.beantown.website/wp-content/uploads/menu.ogv" type="video/ogv"><img src="https://milano.beantown.website/wp-content/uploads/menu.jpg" alt="background"></video>

i just did it here: https://enfold.webers-webdesign.de/

only with mp4 video :
```
function add_video_to_hamburger_background() { 
?>
<script type="text/javascript">
(function($){
	$('#header').one('click', '.av-main-nav-wrap' , function() {
		setTimeout( function() {		  
			$('.av-burger-overlay').append('<div class="video_burger_bg"><video autoplay="" loop="" class="video_bg" style="width: 1920px; height: 1080px;"><source src="/wp-content/uploads/Blurred-Crowd-of-People-Walking_SD_DOWNLOAD.mp4"><img src="/wp-content/uploads/video-preview.jpg" alt="background"></video></div>');		 
		},300);   
	});
})(jQuery);
</script>
<?php 
}
add_action('wp_footer', 'add_video_to_hamburger_background');
```
But one thing to mention Does it all the time loop. so maybe it is best to enter a play/pause routine f.e. on clicking to a link inside the hamburger or the av-main-nav-wrap burger icon.
```
#top .video_bg {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	background-color: #000;
}

#top .av-burger-overlay-bg {
	opacity: 0.8;
}
```
April 17, 2023 at 3:57 pm #1404704

goldengate415
Participant

Wow Guenni007, I am impressed!!! I really like the demo site you set up and the menu is just what I was thinking. Since you design websites all the time, do you think we have moved to a time where sites can just have a hamburger menu? Do people recognize it or do they get confused if they don’t see a menu?

I am not a coder, so I’m not sure how you are adding this to Enfold… the second two parts I see they go into functions.php, but where does this go:
<video autoplay=”” loop=”” class=”video_style” style=”width: 1636px; height: 920px; top: 0px; left: -72.5px;”><source src=”https://milano.beantown.website/wp-content/uploads/menu.m4v” type=”video/mp4″><source src=”https://milano.beantown.website/wp-content/uploads/menu.webm” type=”video/webm”><source src=”https://milano.beantown.website/wp-content/uploads/menu.ogv” type=”video/ogv”></video>

Thanks so much!!!

Rob

PS Gunter may want to add this to Enfold’s features going forward… super cool menu!!!!

April 17, 2023 at 3:57 pm #1404705

goldengate415
Participant

PS Rikard, thank you for the response, can we please leave this thread open so I can communicate with Guenni on this?

April 18, 2023 at 7:44 pm #1404833

Rikard
Keymaster

Hi Rob,

We’ll keep this thread open for you and @guenni007 :-)

Best regards,
Rikard

April 19, 2023 at 1:59 am #1404878
Guenni007
Participant
you see it is in that one line starting with:
$('.av-burger-overlay')

that part:
<video autoplay="" loop="" class="video_bg" style="width: 1920px; height: 1080px;"><source src="/wp-content/uploads/Blurred-Crowd-of-People-Walking_SD_DOWNLOAD.mp4"><img src="/wp-content/uploads/video-preview.jpg" alt="background"></video>

my insertion on that test-page is only with mp4

but if you enter that like this :
```
<video autoplay="" loop="" class="video_style" style="width: 2226px; height: 1252px; top: 0px; left: -248px;">
<source src="https://milano.beantown.website/wp-content/uploads/menu.m4v" type="video/mp4">
<source src="https://milano.beantown.website/wp-content/uploads/menu.webm" type="video/webm">
<source src="https://milano.beantown.website/wp-content/uploads/menu.ogv" type="video/ogv">
<img src="https://milano.beantown.website/wp-content/uploads/menu.jpg" alt="background">
</video>
```
it will not work – the line breaks do hamper the insertion – so i mentioned that it has to be a one-liner

<video autoplay="" loop="" class="video_style" style="width: 2226px; height: 1252px; top: 0px; left: -248px;"><source src="https://milano.beantown.website/wp-content/uploads/menu.m4v" type="video/mp4"><source src="https://milano.beantown.website/wp-content/uploads/menu.webm" type="video/webm"><source src="https://milano.beantown.website/wp-content/uploads/menu.ogv" type="video/ogv"><img src="https://milano.beantown.website/wp-content/uploads/menu.jpg" alt="background"></video>

:
```
function add_video_to_hamburger_background() { 
?>
<script type="text/javascript">
(function($){
	$('#header').one('click', '.av-main-nav-wrap' , function() {
		setTimeout( function() {		  
			$('.av-burger-overlay').append('<div class="video_burger_bg"><video autoplay="" loop="" class="video_style" style="width: 2226px; height: 1252px; top: 0px; left: -248px;"><source src="https://milano.beantown.website/wp-content/uploads/menu.m4v" type="video/mp4"><source src="https://milano.beantown.website/wp-content/uploads/menu.webm" type="video/webm"><source src="https://milano.beantown.website/wp-content/uploads/menu.ogv" type="video/ogv"><img src="https://milano.beantown.website/wp-content/uploads/menu.jpg" alt="background"></video></div>');		 
		},300);   
	});
})(jQuery);
</script>
<?php 
}
add_action('wp_footer', 'add_video_to_hamburger_background');
```
May 3, 2023 at 10:07 pm #1406391

goldengate415
Participant

Guenni007, I added above code to functions.php but it did not change the burger menu on my staging site.
Am I supposed to add it somewhere else?

Thank you!

May 4, 2023 at 4:33 pm #1406458
Guenni007
Participant
which one of that code? here: https://kriesi.at/support/topic/full-screen-hamburger-menu-with-video-background/#post-1404878

if you read you see the warning : line-breaks will not work on that

use this:
```
function add_video_to_hamburger_background() { 
?>
<script type="text/javascript">
(function($){
	$('#header').one('click', '.av-main-nav-wrap' , function() {
		setTimeout( function() {		  
			$('.av-burger-overlay').append('<div class="video_burger_bg"><video autoplay="" loop="" class="video_style" style="width: 2226px; height: 1252px; top: 0px; left: -248px;"><source src="https://milano.beantown.website/wp-content/uploads/menu.m4v" type="video/mp4"><source src="https://milano.beantown.website/wp-content/uploads/menu.webm" type="video/webm"><source src="https://milano.beantown.website/wp-content/uploads/menu.ogv" type="video/ogv"><img src="https://milano.beantown.website/wp-content/uploads/menu.jpg" alt="background"></video></div>');		 
		},300);   
	});
})(jQuery);
</script>
<?php 
}
add_action('wp_footer', 'add_video_to_hamburger_background');
```
can you show us your site?
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.