Making a navbar stackable (bootstrap)

Question

I was wondering if someone would help me correct my html using bootstrap so that when the window is minimised the navbar automatically collapses into a hamburger icon.

Here is my HTML:

<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="https://www.hemsleyfraser.co.uk/" class="navbar-brand">Hemsley Fraser</a>
    </div>

    <div class="collapse navbar-collapse" id="navbar-collapse">

        <ul class="nav navbar-nav">
            <li><a href="home.html">Topics</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Contact Us</a></li>



        </ul>
    </div>
</div>

Thank you very much! :)

There are a lot of tutorials to help you do this. I think this SO question might help among other resources - http://stackoverflow.com/questions/26317679/how-to-add-hamburger-menu-in-bootstrap — ArunGeorge, Jul 19 '16 at 10:40

score 1 · Accepted Answer · answered Jul 19 '16 at 10:42

It's working fine please add both bootstrap files and jquery file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="https://www.hemsleyfraser.co.uk/" class="navbar-brand">Hemsley Fraser</a>
    </div>

    <div class="collapse navbar-collapse" id="navbar-collapse">

        <ul class="nav navbar-nav">
            <li><a href="home.html">Topics</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Contact Us</a></li>



        </ul>
    </div>
</div>

Making a navbar stackable (bootstrap)

1 Answers1