As someone new to Bootstrap, I am seeking the guidance of experienced individuals to help me identify where I may be going wrong.
My goal: I am currently developing a responsive website using Bootstrap. I want my navbar to remain fixed at the top and, when the webpage is viewed on a mobile device, I want the menu items to appear when clicked.
The issue: When viewing the website on a mobile browser, the navbar does not display any menu items when clicked. There is no toggle functionality.
What I have attempted: I have looked through various StackOverflow threads and comments where users recommended ensuring that the "data-toggle" attribute matches the id selector after the "collapse navbar-collapse" class.
I have confirmed that these match up correctly. "myNavbar" is indeed an id selector, but the proposed solution did not resolve the issue.
<div class="container-fluid" id="contentsOfMenu">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class"page-scroll">
<a href="#welcome" id="brandLabel"><img src="images/brainFishIconMenu.png"/></a>
<a class="navbar-brand" href="#welcome" >BrainFish</a>
</div>
</div><!--end of navbar-header--------------------------->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right" id="navLinkColor">
<li class="page-scroll"><a href="#aboutUs">About</a></li>
<li class="page-scroll"><a href="#services">Services</a></li>
<li class="page-scroll"><a href="#approach">Approach</a></li>
<li class="page-scroll"><a href="#contact">Contact</a></li>
</ul>
</div><!--end of myNavBar-->
</div><!--end of contentsOfMenu--------------------->