making a bootstrap menu into a hamburger menu

Question

Relatively new to bootstrap, and not sure how to approach this at all. I am using this as my bootstrap menu, but would like to make it responsive

<div class="topnav">
  <a class="active" href="/">Home</a>
  <div class="search-container">
    <form action="/search.php">
      <input type="text" placeholder="Search..." name="searchterms" value=''>
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
  <span id=login style='float:right'>
    <a href="/contact-us.php">Contact Us</a>
    <a href=/signin.php>Sign in</a> 
    <a href=/signup.up>Sign up</a>    
  </span>
</div>

I want to make it responsive, such that: a) when viewed on a phone/small device, it shows the 'hamburger' (3 lines) icon on the right, with the 'homepage' as the title b) If they click the icon, it 'expands', and first shows the "search" bar filling most of the the 2nd line, with the magnifying glass on the right beside the form field (I'm using fontawesome for icons) c) And of course, then the other menu items below that. d) It would also be nice to be able to have 'submenus' that are an 'accordian' style (i.e., so I might say have 2-3 submenus under contact, 2-3 submenus under sign in, etc, etc and if they clicked say 'contact' it would show the 2-3 submenus and collapse any other 'submenus' (only showing main menus).

How would I do this?

Thanks for your help!

If you're using bootstrap, it's built in to the Navbar component. You can visit their documentation to see how it's managed — fnostro
I saw that, but I don't "get" what I have to do. how do I add that to my existing code - and how to I get the search bar to "wrap" properly (I want it all on one line) also I tried cutting & pasting that code - and it doesn't seem to work on my site. (I am using bootstrap 3.3.7) — user6262902

fnostro fnostro · Accepted Answer · 2019-10-02T19:26:04

I grabbed this from the Bootstrap Code Sample here with no modifications and I added the links/scripts for Bootstrap 3.3.7 via cdn

If you run the snippet you can see display window is small enough to collapse the navbar to the hamburger style mobile menu.

Everything you want to do should just be a matter of overriding some of the styling and content to get the look and feel you need. Anything else should be a matter of reading the documentation to understand how the bootstrap Collapse component works

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

making a bootstrap menu into a hamburger menu

1 Answers