How to automatically collapse the mobile site navigator once an option is clicked.

[Eagle22]

Hi All, this is my first post in the Weebly Community and I'm hoping some one will be able to help with a problem I have.

I have just launched a new website (see here http://www.hudsonsteakhouse.co.uk/ ) but I have a problem with the mobile hamburger navigator. 

All links on the navigator takes you to a different section on the home page, apart from Reservations link which takes you to a differernt page. These links work perfectly well from a desktop but when the mobile navigator is used, the navigation "X" doesn't "Auto Collapes" back to a hambuger when an option is clicked/tapped in the navigator.

The navigator needs to Auto Collapes when an option is clicked, then the customer will see the page autoscroll to the relevant section.

My knowlege of HTML / JS is limited but I'm hoping someone can assist me with this issue.

Many thanks in advance.

Chris.

[Brodie]

Welcome to Community, Eagle22!

First thing I see, you're using a custom theme. Can you revert to a standard theme then test out the site?

[Eagle22]

Hi Brodie, 

Thanks for getting back to me.

I've changed the theme to "SRLY - Brisk" but needed to apply a few different colours.

I've tested the Mobile Nav and the problem still occurs. 

When you click on a link (for example "Contact Us") you can see the page scrolls down to the section but the Actual Navigator doesn't dissapear.

However the mobile nav does collapses when you click on the Reservations link as this takes you to a seperate page.

Please advise..

Thank you.

Chris.

[Adam7]

Are you linking in your navigation to anchors on a page, @Eagle22?

[Eagle22]

Hi Adam,

I've placed html objects in each section of the page i.e <div id="sectionname"></div>.

Then in the Navigation I've placed http://www.hudsonsteakhouse.co.uk/#sectioname

Hope this helps.

Chris.

[Adam7]

Are they all on the home page of your site? Add "index.html" to all your links like this:

http://www.hudsonsteakhouse.co.uk/index.html#sectioname

[Eagle22]

Hi Adam, 

Thanks for your message.

I have tried this appouch before but if I apply this then the smooth scroll down to the section doesn't work.

It simply refreshes the page and jumps direct to the section.

Any other ideas?

Thanks.

Chris.

[Adam7]

I wonder if the smoothscrolling script you're using is interfering in some way.  What happens if you temporarily remove that?

[Eagle22]

Hi Adam,

I removed the code from the headerbut the problem still occurs. Without the code the Mobile Nav jumps to the section on the page but the mobile nav still appears on screen.

This is the code I used to create the smooth scroll down to the sections. 

=====

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<script>
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>

====

I don't know code well enough but I'm starting to think the code needs modifying so it works in the same manner as this site.. http://www.theovenpizzeria.co.uk/

i.e From the mobile nav, you select an option then the nav collapes back up , then the pages scrolls smoothly to the relevant section.

Hope this helps.

Chris.

[Adam7]

You're probably right, although we can't provide assistance with that kind of custom coding.  Have you thought about trying a different smooth scrolling widget?

[Eagle22]

Thanks for letting me know Adam. I have a Designer account - Does Weebly offer such a thing?