I'm currently dealing with an issue regarding the behavior of a particular webpage that is quite unusual. I have provided a link to the Github page where this issue is occurring. Interestingly, the problem seems to be resolved when I remove the nav tag, however, it is essential for the functionality I require.
Upon further investigation by deleting the nav element from the developer console, I noticed that the nav tag is impacting the section below, specifically the "workshop_intro".
For reference, here is the link to the Github page:
Github repository: https://github.com/sarang13579/expt
<section class="workshop_intro">
<div class="container py-2">
<h1 class="py-4"><strong>Gallery</strong></h1>
<p>Cut and Engraved products range</p>
<h2>PORTFOLIO</h2>
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('wood')"> Wood Cutting and Engraving</button>
<button class="btn" onclick="filterSelection('stone')"> Stone Engraving</button>
<button class="btn" onclick="filterSelection('glass')"> Glass Engraving</button>
<button class="btn" onclick="filterSelection('others')"> Others Cutting and Engraving</button>
</div>
My expectation is that the buttons in the portfolio section "workshop_intro" highlight one at a time without the need to remove the nav tag.