Collapse menu on mobile after item click

We would need to see some code or a link to be able to give you assistance on this.

Here is a menu code I have.

               <div class="top-nav s-12 l-10" style="align:right">
                  <p class="nav-text" ></p>
                  <ul class="nav navbar-nav navbar-right">
                     <li class="active-item"><a href="#carousel">Home</a></li>
                     <!--<li><a href="#features">Features</a></li>-->
                     <li><a href="aboutus.html">About Us</a></li>
                     <li><a href="#flex-container">FAQs</a></li>
                     <li><a href="#contact">Contact</a></li>
					 <li><a href="register.html">Register</a></li>
					 <li><a  onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</a></li>
					 <li><a onclick="document.getElementById('myModal').style.display='block'" style="width:auto;" data-toggle="modal"></a></li>
					 
                  </ul>
               </div>

Select allOpen in new window

Here is what that code looks like (http://www.marcorpsa.com/ee/t3147.html)

With reference to the above sample - what is the problem you are having?

The problem is that on a mobile phone when you click a menu the menu opens and shows the menu items, now the problem is that when a user clicks the item the menu doesn't collapse the user will have to go up and click the menu again then the menu will collapse.

Please look at my sample again
http://www.marcorpsa.com/ee/t3147.html

Does this mimic the behaviour of your page?

Mmm yes but the original does collapse the menu. please have a look at this which is the original site and you can also access it by your mobile phone to see what I'm referring to, click the login menu option you will see that the login modal will be beneath the menu. This code I posted here is exactly the same as that on the live site. I want to make it do it like this.

A working link showing the problem is what was needed - so thank you for that.

Now to the problem you are having - the example you are referring to is for links that are for the same page (#links) is that what we are talking about here - because any other link will navigate away from the page and the menu will be re-rendered.

If you look at your console there are errors that are generated when you click the Features link
TypeError: $(...).offset(...) is undefined
And
Error: Syntax error, unrecognized expression: ."top-nav.in

You should probably address those first.

Then in the reference script they have this code

$(function () {
    $("nav").find("li").on("click", "a", function () {
        $('.navbar-collapse.in').collapse('hide');
    });
});

Select allOpen in new window

This is the bit that does the hiding - you will need to add that to your page.

The error you are referring to is indeed the result when I was trying to add that code snippet so I don't know as to which nav name I should us.

Have you added the code I pasted above?

Yes but still on a mobile phone when I click the menu item it still doesn't hide the menu items, just visit the site using a mobile phone  and click login you will see what I'm referring to.

I see the problem - but we have to go through this step by step and the problem you have now is a different problem.

If you open the page in a browser and emulate Mobile - when you click the menu you will see you now get this error

TypeError: $(...).collapse is not a function

Select allOpen in new window

The reason for that is that you have not included the Bootstrap jQuery file - you have only included the .css file.

Add the Bootstrap jQuery file to your page. Either download and add or use the CDN. You are using 3.1.1 so you would need this library
https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js

Well that was already included on line 71 I've also included that you have posted but still the same problem.

Ok, next step is to look at your markup.
Look at this line

$(this).closest(".navbar-collapse.in").collapse('hide');

Select allOpen in new window

Go up the tree and find the closest element that has the class .navbar-collapse. If I look at your code I don't see that anywhere - which is why the jQuery is failing - it does not know what it to collapse.

Look at this page
http://getbootstrap.com/docs/3.3/components/#callout-navbar-role

It shows you how to markup your navbar correctly

I've tried that now and things just looked bad, what I did now is that I added something but for now it only take effect when you click the home option but for an effect to take pace you need to click twice, the second problem is that its totally hides the menu instead of collapsing it.

If you don't markup your menu according to Bootstrap standards it is not going to work. the solution you are copying is based on a standard Bootstrap menu - so you will need to get your menu to work according to that or change your solution to a custom one.