How do I make button visible on navbar regardless of window size?

I have a navigation bar with a button that expands to reveal the menu options. The button is only visible when the window is very small (mobile size). How do I get the button to stay visible in the nav bar regardless of window size?

Bonus question. When I click the button and the menu drops down, it stretches the whole navbar down with it. Is there anyway to avoid this?

here is the code for my navbar.


ish Toggle nav
 <div class="navbar-collapse collapse">
   <ul class="nav navbar-nav">
     <li class="active"><a href="#"><i class="fa fa-home" aria-hidden="true"></i></a></li>
     <li><a href="#about"><i class="fa fa-info-circle" aria-hidden="true"></i>

  •          </li>

    and here is my codepen:

    Thanks Campers

    That “Hamburger” button is designed for small screens. I’d say what you’re looking for is a bootstrap navbar dropdown. The way that the hamburger works is that it just compacts your navbar. That’s why the navbar expands when you open it. I forked your pen to include a dropdown instead.

    1 Like