Is there a way to add the navbar-toggle button in bootstrap as a fixed button on the screen?

Question

I want to add the navbar toggle button as given in the image

in my html page.

However, bootstrap gives us the option to create buttons such as this

I do not want any normal button and specifically want the first image. Is there a way to do this?

Answer 1

The final answer has been split to 2 parts: The initial code that was worked on. And final result that was used. Both can be used to create a menu icon that looks like the "navbar-toggle" button. But is always fixed on the screen!

INITIAL TRIAL CODE

• Makes use of <span> as in Bootstrap.
• Positioned on Top Right.
• CSS targeted (can change colour) and responsive.

.ham-menu, .ham-menu span {
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
  cursor: pointer;
}

.ham-menu {border: 2px solid #666; width: 32px; padding: 1px; border-radius: 3px; position: absolute; right: 5px; top: 5px; }
.ham-menu .line {border: 3px solid #666; line-height: 0; font-size: 0; display: block; margin: 2px;}
.ham-menu .line.small {border-width: 2px;}

.ham-menu:hover {border-color: #99f;}
.ham-menu:hover span {border-color: #ccf;}

<div class="ham-menu">
  <span class="line"></span>
  <span class="line small"></span>
  <span class="line"></span>
</div>
<p>Hover and See</p>

When the screen size is small (both toggle buttons are visible

When the screen size is large (the left toggle icon remains)