Syed Syed - 7 months ago 10
Javascript Question

How to manually enable bootstrap responsive menu for small device

I like to change the default ID name from

id="navbar"
to
id="main-navbar"


From: <div id="navbar" class="navbar-collapse collapse">
To: <div id="main-navbar" class="navbar-collapse collapse">


If I change then the main nav/menu items doesn't expand/collapse when you check in small device. How can I manually enable this feature? Please help.

Here is bootstrap template that I am using: https://getbootstrap.com/examples/navbar/

Answer

There is this button in code: <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

So you change data-target="#navbar" to data-target="#main-navbar"