Bootstrap Snippet Twitter navbar using HTML CSS jQuery

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/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <nav class="navbar navbar-expand navbar-light bg-white">
        <div class="container">
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a href="" class="nav-link">
                            <svg viewBox="0 0 24 24">
                                <g>
                                    <path d="M22.46 7.57L12.357 2.115c-.223-.12-.49-.12-.713 0L1.543 7.57c-.364.197-.5.652-.303 1.017.135.25.394.393.66.393.12 0 .243-.03.356-.09l.815-.44L4.7 19.963c.214 1.215 1.308 2.062 2.658 2.062h9.282c1.352 0 2.445-.848 2.663-2.087l1.626-11.49.818.442c.364.193.82.06 1.017-.304.196-.363.06-.818-.304-1.016zm-4.638 12.133c-.107.606-.703.822-1.18.822H7.36c-.48 0-1.075-.216-1.178-.798L4.48 7.69 12 3.628l7.522 4.06-1.7 12.015z"></path>
                                    <path d="M8.22 12.184c0 2.084 1.695 3.78 3.78 3.78s3.78-1.696 3.78-3.78-1.695-3.78-3.78-3.78-3.78 1.696-3.78 3.78zm6.06 0c0 1.258-1.022 2.28-2.28 2.28s-2.28-1.022-2.28-2.28 1.022-2.28 2.28-2.28 2.28 1.022 2.28 2.28z"></path>
                                </g>
                            </svg>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="" class="nav-link">
                            <svg viewBox="0 0 24 24">
                                <g>
                                    <path
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
body {
            background-color: rgb(230, 236, 240) !important;
            overflow-y: scroll;
        }
        nav.navbar  {
            padding: 0 !important;
            border-bottom: 1px solid rgb(101, 119, 134, 0.5);
        }
        nav.navbar > .container {
            max-width: 1000px !important;
            padding: 0px 10px !important;
        }
        ul.navbar-nav > li.nav-item > a.nav-link {
            width: 90px !important;
            height: 52.5px !important;
            line-height: 34.5px !important;
            text-align: center !important;
            border-bottom: 2px solid #fff;
            font-size: 15px !important;
        }
        ul.navbar-nav > li.active > a.nav-link {
            border-bottom-color: rgba(29,161,242,1.00);
        }
        ul.navbar-nav > li.nav-item > a.nav-link:hover {
            border-bottom-color: rgba(29,161,242,1.00);
        }
        ul.navbar-nav > li.nav-item > a.nav-link > svg {
            max-width: 100%;
            height: 1.640625rem;
            fill: rgb(101, 119, 134) !important;
        }
        ul.navbar-nav > li.active > a.nav-link > svg {
            max-width: 100%;
            height: 1.640625rem;
            fill: rgba(29,161,242,1.00) !important;
        }
        .search {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
 $(document).ready(function() {
            $("li.nav-item").click(function (e) {
                e.preventDefault();
                $(".nav-item").removeClass("active");
                $(this).addClass("active");   
            });
        });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Twitter navbar"
Bootstrap 4.1.1 Snippet by sandip002

Related: See More

Questions / Comments:

"Twitter navbar" Bootstrap 4.1.1 Snippet by sandip002

Related: See More

Questions / Comments:

"Twitter navbar"
Bootstrap 4.1.1 Snippet by sandip002