Click here to Skip to main content
15,867,568 members
Please Sign up or sign in to vote.
2.33/5 (3 votes)
See more:
HTML
<!-- main nav -->
                <nav  id="navbar-collapse" class="collapse in navbar-collapse navbar-right" role="navigation">
                    <ul id="nav" class="nav navbar-nav">
                        <li><a style="color: #9d9d9d;" href="#body">Home</a></li>
                        <li><a style="color: #9d9d9d;" href="#about">About</a></li>
                        <li><a style="color: #9d9d9d;" href="#portfolio">Screenshots</a></li>
                        <li><a style="color: #9d9d9d;" href="#testimonials">Testimonials</a></li>
                        <li><a style="color: #9d9d9d;" href="#price">Features</a></li>
                        <li><a style="color: #9d9d9d;" href="#contact">Contact</a></li>
						<li><a style= "background-color: #2a7ead; color: #fff;"href="#yo">Buy Now</a></li>
					 </ul>
                </nav>
				<!-- /main nav -->



<div class="navbar-header" >
                    <!-- responsive nav button -->
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
                    </button>
					<!-- /responsive nav button -->
					
					<!-- logo -->
					
						<img style="padding-left: 7px;" src="img/logo.png" alt="logo">
					
					<!-- /logo -->
                </div>


What I have tried:

I've followed all instructions and can't figure it out!
Posted
Updated 9-Feb-16 6:52am
v2
Comments
Chris Maunder 9-Feb-16 12:52pm    
There's no way we can answer this without seeing the javascript and CSS associated with this HTML
Member 12316766 9-Feb-16 12:59pm    
Hi Chris.

Could you please let me know what javascript should be included? Is there something within it that can help me locate it to put it on the post?
Sergey Alexandrovich Kryukov 9-Feb-16 13:22pm    
Just try to picture the standpoint of a person who wants to help you to solve this problem. Imagine it's you. What code would you need to see? At this moment, you know better what to present.
—SA
Member 12316766 9-Feb-16 14:05pm    
<script>
$(document).ready(function () {
$(".navbar-nav li a").click(function(event) {
$(".collapse").collapse('hide');
});
});</script>
Sergey Alexandrovich Kryukov 9-Feb-16 14:16pm    
Thank you. Next time (or right now, if you want to make it better), please put all additional code into the body of your question using "Improve question". In comment posts, code cannot be properly formatted. In this case, your <element> can be put directly to your HTML sample.
—SA

1 solution

It seems like your are using NavNav Navigation Bar Menu [^] and you lost somewhere using it properly. The link might help you to figure it out. But as an alternative you can also use bootstrap.js and bootstrap.css to achieve similar feature. Bootstrap Dropdown menu[^], Bootstrap Tabs[^]
 
Share this answer
 
v2
Comments
Richard Deeming 9-Feb-16 13:53pm    
The code in the question looks like a fairly standard Bootstrap 3 Navbar to me:
Navbar | Components | Bootstrap[^]
Wonde Tadesse 9-Feb-16 13:58pm    
Who said it's not ?
Richard Deeming 9-Feb-16 13:59pm    
I got the impression that you did:
"... you are using NavNav Navigation Bar Menu ..."
"... alternatively you can use bootstrap.js ..."
:)
Wonde Tadesse 9-Feb-16 14:03pm    
It's also NavNav Navigation bar Menu use such tags. :). Beside you don't necessary need to use <nav></nav> for bootstrap.It can be achieved through <div>. That's what the example shows.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900