Any way to add a close button to nav menu

Hey all,

Just wondering if there was a way to add a close button into the nav menu for mobile devices. By default the menu covers the hanburger icon and it’s not easy to close. I’d like to put an X in the menu to close it. Also, if I put a margin in to offset the menu, the hamburger button doesn’t close the menu either. Any advice?

Thanks!

1 Like

Hi @DFink
Adding a close button is a piece of cake actually!
Just add a link block without an actual link (default link is: #). Clicking whatever link inside a navbar will always close the foldout menu. So a link block without an actual link is perfect for a close-button.

See one of my templates for example.
http://template-hide.webflow.com/

6 Likes

Yeah but it will also scroll to the top of the page. This one is not something he’s looking for.

@DFink try this one

$('.close-menu').click(function(e) {
  e.preventDefault();
  $('.menu-button').trigger('click');
});

Put this in your custom code section in the before </body> field. Notice that there is a .menu-button class. It is the class of the menu:

Hope this one helps :slight_smile:

1 Like

Hey Bartosz,

It doesn’t seem to work. I enclosed it in a script tag as you mentioned in that other thread. Is that correct? I replaced menu-button with my class for the menu button.

Rowan, that is a really nice template. How did you get the menu to fill the whole frame?

Thanks,
Dave

What I actually would love to have is exactly what rowan has with an X in the menu itself but for it to not take me to the top of the page. Any way to do that?

Here is the video tutorial. Hope you like it :smile:
http://quick.as/bpouglj

Wow, Bartosz,

You are the man!

Simple novice question. If I already have a script in my code section, can I add this between those script tags or should I create a new script open and close?

I followed your instructions and copied your code from the video but I used a text block for the trigger instead to get an x for the close button. It doesn’t work for some reason. Can you take a look at my public link?

https://webflow.com/design/canalalarmdevices?preview=8db6b6b4a108aa7ec50b0d7e0a72ad74

And heres the script I put in

<script>
    $(document).ready(function() {
        $('#close-menu').click(function(e) {
            e.preventDefault();
            $('#menu-button')
        });
    });
</script>

Hope we can figure this out. And I will donate to you out of my own pocket for this!

Thanks!

First. Change this:

<script>
  if ($('html').hasClass('w-mod-touch')){    
    $('.signupformfield').attr('placeholder','Sign up for our newsletter!');
  }
</script>

to this:

<script>
	function bk_placeholder() {
		if ($('html').hasClass('w-mod-touch')){    
			$('.signupformfield').attr('placeholder','Sign up for our newsletter!');
		}
	}
	$(document).ready(function() {
		bk_placeholder();
		$(window).resize(function() {
			bk_placeholder();
		});
	});
</script>

This will trigger the function when you change the size of your browser.


Next. Remove this:

<script>
    $(document).ready(function() {
        $('#close-menu').click(function(e) {
            e.preventDefault();
            $('#menu-button')
        });
    });
</script>

and put this:

$('#close-menu').click(function(e) {
    e.preventDefault();
    $('#menu-button').trigger('click');
});

Right after this:

$(document).ready(function() {
    bk_placeholder();

So the whole script will look like this:

<script>
	function bk_placeholder() {
		if ($('html').hasClass('w-mod-touch')){    
			$('.signupformfield').attr('placeholder','Sign up for our newsletter!');
		}
	}
	$(document).ready(function() {
		bk_placeholder();
		$('#close-menu').click(function(e) {
			e.preventDefault();
			$('#menu-button').trigger('click');
		});
		$(window).resize(function() {
			bk_placeholder();
		});
	});
</script>

You’re welcome :slight_smile:

It doesn’t scroll to the top of the page for me. Hmm…

For me it also stays at the position of the page where you click the button to close the menu…

This worked perfectly for me, thank you! No issues with it scrolling all the way to the top because my menu is only at the top anyway. Thanks for posting this!

1 Like