I recently developed a website using Bootstrap. On my site, there is a navigation bar with menu options including 'About,' 'My Projects,' and 'Contact Me' that are hidden behind an expandable menu when the page width is less than the md breakpoint. I've incorporated data-toggle="collapse" into these menu options so that clicking on any of them will collapse the menu.
The issue I am facing is that the menu options mentioned above go through the collapse animation even when the page width exceeds the md breakpoint.
One potential solution I am considering involves dynamically adding or removing the data-toggle="collapse" attribute based on the current size of the page by utilizing $(window).resize() and $(window).load() event listeners for the initial loading of the page.
Is there a more effective approach to address this problem?
Website Link:
HTML:
<nav class="navbar navbar-inverse fixed-top navbar-toggleable-md navbar-light bg-faded" style="background-color:#3A4A4D;">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Ben Shippey</a>
<div class="collapse navbar-collapse mr-auto" id="navbarSupportedContent" style="background-color:#3A4A4D;">
<ul class="navbar-nav ">
<li class="nav-item">
<a id="aboutButton" class="nav-link active" href="#navbarSupportedContent" data-toggle="collapse">About</a>
</li>
<li class="nav-item">
<a id="projectButton" class="nav-link" href="#navbarSupportedContent" data-toggle="collapse">My Projects</a>
</li>
<li class="nav-item">
<a id="contactButton" class="nav-link" href="#navbarSupportedContent" data-toggle="collapse">Contact Me</a>
</li>
</ul>
</div>
</nav>