Bootstrap Snippet Flipkart like navbar bootstrap navbar menu responsive menu nav navbar using HTML CSS Bootstrap Javascript

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="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<div id="flipkart-navbar">
    <div class="container">
        <div class="row row1">
            <ul class="largenav pull-right">
                <li class="upper-links"><a class="links" href="http://clashhacks.in/">Link 1</a></li>
                <li class="upper-links"><a class="links" href="https://campusbox.org/">Link 2</a></li>
                <li class="upper-links"><a class="links" href="http://clashhacks.in/">Link 3</a></li>
                <li class="upper-links"><a class="links" href="http://clashhacks.in/">Link 4</a></li>
                <li class="upper-links"><a class="links" href="http://clashhacks.in/">Link 5</a></li>
                <li class="upper-links"><a class="links" href="http://clashhacks.in/">Link 6</a></li>
                <li class="upper-links">
                    <a class="links" href="http://clashhacks.in/">
                        <svg class="" width="16px" height="12px" style="overflow: visible;">
                            <path d="M8.037 17.546c1.487 0 2.417-.93 2.417-2.417H5.62c0 1.486.93 2.415 2.417 2.415m5.315-6.463v-2.97h-.005c-.044-3.266-1.67-5.46-4.337-5.98v-.81C9.01.622 8.436.05 7.735.05 7.033.05 6.46.624 6.46 1.325v.808c-2.667.52-4.294 2.716-4.338 5.98h-.005v2.972l-1.843 1.42v1.376h14.92v-1.375l-1.842-1.42z" fill="#fff"></path>
                        </svg>
                    </a>
                </li>
                <li class="upper-links dropdown"><a class="links" href="http://clashhacks.in/">Dropdown</a>
                    <ul class="dropdown-menu">
                        <li class="profile-li"><a class="profile-links" href="http://yazilife.com/">Link</a></li>
                        <li class="profile-li"><a class="profile-links" href="http://hacksociety.tech/">Link</a></li>
                        <li class="profile-li"><a class="profile-links" href="http://clashhacks.in/">Link</a></li>
                        <li class="profile-li"><a class="profile-links" href="http://clashhacks.in/">Link</a></li>
                        <li class="profile-li"><a class="profile-links" href="http://clashhacks.in/">Link</a></li>
                        <li class="profile-li"><a class="profile-links" href="http://clashhacks.in/">Link</a></li>
                        <li class="profile-li"><a class="profile-links" href="http://clashhacks.in/">Link</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="row row2">
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
#flipkart-navbar {
    background-color: #2874f0;
    color: #FFFFFF;
}
.row1{
    padding-top: 10px;
}
.row2 {
    padding-bottom: 20px;
}
.flipkart-navbar-input {
    padding: 11px 16px;
    border-radius: 2px 0 0 2px;
    border: 0 none;
    outline: 0 none;
    font-size: 15px;
}
.flipkart-navbar-button {
    background-color: #ffe11b;
    border: 1px solid #ffe11b;
    border-radius: 0 2px 2px 0;
    color: #565656;
    padding: 10px 0;
    height: 43px;
    cursor: pointer;
}
.cart-button {
    background-color: #2469d9;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .23), inset 1px 1px 0 0 hsla(0, 0%, 100%, .2);
    padding: 10px 0;
    text-align: center;
    height: 41px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
function openNav() {
    document.getElementById("mySidenav").style.width = "70%";
    // document.getElementById("flipkart-navbar").style.width = "50%";
    document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.body.style.backgroundColor = "rgba(0,0,0,0)";
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Flipkart like navbar bootstrap navbar menu responsive menu nav navbar "
Bootstrap 3.0.0 Snippet by navintukral

Related: See More

Questions / Comments:

"Flipkart like navbar bootstrap navbar menu responsive menu nav navbar " Bootstrap 3.0.0 Snippet by navintukral

Related: See More

Questions / Comments:

"Flipkart like navbar bootstrap navbar menu responsive menu nav navbar "
Bootstrap 3.0.0 Snippet by navintukral