Bootstrap Snippet Animated Brand in Navbar using HTML CSS Bootstrap 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/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 ---------->
<!--FONT AWESOME CDN LINK FOR FONT-AWESOME FONT -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse">
                <i class="fa fa-chevron-down faa-vertical animated"></i>
            </a>
            <a tabindex="0" class="navbar-brand faa-pulse faa-slow animated" data-toggle="popover" data-trigger="focus" data-html="true" data-placement="bottom" data-title="Brand Quote..." data-content="<img class='img-responsive' height='140' width='140' src='data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=='/<p>Your Brand Image</p>">
                <i class="fa fa-balance-scale"></i>
                <i class="fa fa-lg">B</i>
                <i class="fa fa-lg">r</i>
                <i class="fa fa-lg">a</i>
                <i class="fa fa-lg">n</i>
                <i class="fa fa-lg">D</i>
            </a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a class="faa-parent animated-hover">
                       <i class="fa fa-fw fa-lg fa-home faa-tada faa-fast"></i>Home
                    </a>
                </li>
                <li>
                    <a class="faa-parent animated-hover">
                       <i class="fa fa-fw fa-lg fa-quote-left faa-tada faa-fast"></i>About Us
                    </a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle faa-parent animated-hover" data-toggle="dropdown">
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
.dropdown-menu>li>a,
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav >.active>a,
.navbar-default .navbar-header>a,
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav .open .dropdown-menu>li>a
{
    color:#2C3E50;
    transition:all 1s;
    -o-transition:all 1s;
    -moz-transition:all 1s;
    -webkit-transition:all 1s
}
.dropdown-menu>li>a:hover,
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav >.active>a,
.navbar-default .navbar-header>a:hover,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover
{
    color:#FFFFFF;
    background:#2C3E50
}
a
{
    cursor:pointer;
}
a:hover .fa
{
    -webkit-animation:fa-spin 1s;animation:fa-spin 1s
}
.hl-left
{
    border:1px dotted #5C4383;
    border-left:5px solid #5C4383;
    padding:30px;
    border-radius:10px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
$(function(){$('[data-toggle="popover"]').popover()});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Animated Brand in Navbar"
Bootstrap 3.3.0 Snippet by vijaysasavadiya

Related: See More

Questions / Comments:

"Animated Brand in Navbar" Bootstrap 3.3.0 Snippet by vijaysasavadiya

Related: See More

Questions / Comments:

"Animated Brand in Navbar"
Bootstrap 3.3.0 Snippet by vijaysasavadiya