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

1

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.

[code]

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>
   </ul>
 </div>
   </button>
    [/code]

    and here is my codepen: https://codepen.io/DeathstarDude/details/MbzoMK/

    Thanks Campers

    2

    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