Bootstrap Snippet Mobile Nav Bar using HTML CSS Bootstrap jQuery

"Mobile Nav Bar"
Bootstrap 3.3.0 Snippet by mouse0270

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
    <div class="navbar-more-overlay"></div>
    <nav class="navbar navbar-inverse navbar-fixed-top animate">
        <div class="container navbar-more visible-xs">
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search for...">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="submit">Submit</button>
                        </span>
                    </div>
                </div>
            </form>
            <ul class="nav navbar-nav">
                <li>
                    <a href="#">
                        <span class="menu-icon fa fa-picture-o"></span>
                        Photos
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="menu-icon fa fa-bell-o"></span>
                        Reservations
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="menu-icon fa fa-picture-o"></span>
                        Photos
                    </a>
                </li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css");
html, body {
    height: 100%;
}
body {    
    padding-top: 75px;
}
body.navbar-more-show  {
    overflow: hidden;
}
.animate {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.navbar {
    height: calc(100%);
    max-height: 300px;
    -webkit-transform: translate(0px, calc(-100% + 69px));
    transform: translate(0px, calc(-100% + 69px));
}
.navbar .container:not(.navbar-more) {
    padding: 0px;
}
.navbar-more-overlay {
    background-color: rgba(102, 102, 102, 0.55);
    display: none;
    height: 100%;
    left: 0px;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 1029;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() {
    $('a[href="#navbar-more-show"], .navbar-more-overlay').on('click', function(event) {
        event.preventDefault();
        $('body').toggleClass('navbar-more-show');
        if ($('body').hasClass('navbar-more-show')) {
            $('a[href="#navbar-more-show"]').closest('li').addClass('active');
        }else{
            $('a[href="#navbar-more-show"]').closest('li').removeClass('active');
        }
        return false;
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Questions / Comments:

Posting GuidelinesFormatting

The dropdown menu (w/ submenu) doesn't display properly

Viet Nguyen () - 9 years ago - Reply 0

The sub-menu when you click on MORE disappears after a click. I believe this is a bug

Vic () - 9 years ago - Reply 0

question I used this for example on my browser works fine it also responsive when you make the screen bigger o media screen size but when i open my app on mobile browser it just does not work the mobile menu any idea i'm using spring 4.2 and all my dependencies are include on my deployment assembly resources everything

carlos () - 9 years ago - Reply 0

hi great execution and idea.. one simple question: what has do be done to set the menu sticky on top instead of slide them down if menu opens?

Sebastian () - 9 years ago - Reply 0

I've created 4 level submenu
e.g., Top ->Test, Top1->Submenu1->Submenu2->Submenu3, Top2->Test->test

In mobile When I touch Submenu2, it shows options like menu button click that means I am unable to access Submenu3.

Please modify above code for nested submenu (about 4 or 5 level) and check it in mobile.

I've got the solution for above problem-
bootstrap-submenu-2.0.0
http://vsn4ik.github.io/boo...

ravindra ahar () - 9 years ago - Reply 0

How can I make the icons visible on desktop view. they're only showing on mobile display. Thanks in advance

bigshot () - 9 years ago - Reply 0

change line 100 to `display: inline`. Be warned you may be required to do more styling to make this look good though.