How to customize a footer like bootstrap nav-bar? - html

Question

I have a scenario where I need to display a footer just like navbar(i.e; need to hide list items of ul list using some button is responsive, on click of that button need to display list items), here I am using bootstrap navbar, but instead of hamburger I need some other customized button. Is it possible?
Here is my code:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</div>
</div>
</nav>
Any help would be appreciated.
Thanks in Advance.

Answer 1

From Bootstrap documentation ... You should be able to change the icon here
https://getbootstrap.com/docs/4.0/components/navbar/
External content
Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page. Because our plugin works on the id and data-target matching, that’s easily done!
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h4 class="text-white">Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>