content logo
Bootstrap Headers: Bootstrap Dynamic Header with Style Change

The use of headers on sites is necessary and inevitable, but the amount of audience attraction by these headers depends on the beauty and attractiveness of these headers. The following code is a nice header that normally only the icon of each item is displayed and in the header mode for each icon, the title of that item is displayed. Changing the color, sharpness or softness of the header box and the color of the icons are some of the things that can be changed with this header and personalize this header. This header is very convenient for the admin panel.

#Animating Navbar Code # Bootstrap Navbar Animation # Bootstrap Dynamic Navbar
<!-- this script got from www.frontendfreecode.com -->
<div id="nav-colors"> Navbar <button id="pink" class="btn"></button> <button id="red" class="btn"></button> <button id="purple" class="btn"></button> <button id="blue" class="btn"></button> <button id="green" class="btn"></button> <button id="yellow" class="btn"></button> <button id="orange" class="btn"></button> </div> <div id="font-colors"> Font <button id="white" class="btn"></button> <button id="black" class="btn"></button> </div> <div id="edges"> Edges <button id="rounded" class="btn">Rounded</button> <button id="square" class="btn">Square</button> </div> <h1> Bootstrap Navbar</h1> <nav class="navbar"> <div class="container-fluid"> <!-- Nav Header --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><span class="fa fa-home"></span><span class="link"> Home</span></a> </div> <!-- Nav Collapse --> <div class="navbar-collapse collapse" id="collapse-1"> <!-- Nav Left --> <ul class="nav navbar-nav"> <!-- Products --> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="fa fa-tags"></span><span class="link"> Products</span> <span class="fa fa-caret-down"></span> </a> <ul class="dropdown-menu"> <li><a href="#"><span class="fa fa-tag"></span> Catalogue 1</a></li> <li><a href="#"><span class="fa fa-tag"></span> Catalogue 2</a></li> </ul> </li> <!-- Services --> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="fa fa-gears"></span><span class="link"> Services</span> <span class="fa fa-caret-down"></span> </a> <ul class="dropdown-menu"> <li><a href="#"><span class="fa fa-gear" /></span> Service 1</a></li> <li><a href="#"><span class="fa fa-gear" /></span> Service 2</a></li> <li><a href="#"><span class="fa fa-gear" /></span> Service 3</a></li> </ul> </li> <!-- About --> <li><a href="#"><span class="fa fa-info-circle"></span><span class="link"> About</span></a></li> <!-- Contact --> <li><a href="#"><span class="fa fa-phone"></span><span class="link"> Contact</span></a></li> </ul> <!-- Nav Right --> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn"><span class="fa fa-search"></span></button> </form> </div> </div> </nav><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a>
@import url("https://fonts.googleapis.com/css?family=Roboto");

body {
    margin: 10%;
    color: white;
    background: #111111;
    font-family: "Roboto", sans-serif;
}

#nav-colors, #font-colors, #edges {
    margin-top: 10px;
}

    #nav-colors .btn, #font-colors .btn, #edges .btn {
        display: inline-block;
        padding: 10px;
        margin: 0 5px;
        border: 2px solid #111111;
        transition: 0.2s ease;
    }

        #nav-colors .btn:hover, #font-colors .btn:hover, #edges .btn:hover {
            border: 2px solid white;
        }

    #nav-colors #pink {
        background: linear-gradient(to right, #ff5858, #f857a6);
    }

    #nav-colors #red {
        background: linear-gradient(to right, #d31027, #ea384d);
    }

    #nav-colors #purple {
        background: linear-gradient(to right, #41295a, #2f0743);
    }

    #nav-colors #blue {
        background: linear-gradient(to right, #396afc, #2948ff);
    }

    #nav-colors #green {
        background: linear-gradient(to right, #add100, #7b920a);
    }

    #nav-colors #yellow {
        background: linear-gradient(to right, #f7971e, #ffd200);
    }

    #nav-colors #orange {
        background: linear-gradient(to right, #e43a15, #e65245);
    }

    #font-colors #white {
        background: white;
    }

    #font-colors #black {
        background: black;
    }

    #edges #rounded {
        background: black;
    }

    #edges #square {
        background: black;
        border-radius: 0px;
    }

        #edges #rounded:hover, #edges #square:hover {
            color: white;
        }

.navbar {
    border: 0;
    border-radius: 0;
    background: linear-gradient(to right, #ff5858, #f857a6);
}

    .navbar .nav li > a, .navbar .navbar-brand {
        max-height: 50px;
        width: auto;
        background: transparent !important;
        font-size: 18px;
        transition: 0.2s ease-in-out;
    }

        .navbar .nav li > a:hover, .navbar .navbar-brand:hover {
            background-color: rgba(255, 255, 255, 0.2);
            font-size: 14px;
        }

            .navbar .nav li > a:hover .link, .navbar .navbar-brand:hover .link {
                width: 100%;
                padding: 0 5px 0 5px;
                visibility: visible;
                font-size: 14px;
            }

    .navbar .link {
        width: 0;
        font-family: "Roboto", sans-serif;
        transition: 0.2s ease-in-out;
        visibility: hidden;
        font-size: 0px;
    }

    .navbar span {
        color: white;
    }

    .navbar .navbar-toggle {
        padding-right: 0;
    }

        .navbar .navbar-toggle .icon-bar {
            background: white;
        }

    .navbar .navbar-collapse {
        display: none;
    }

    .navbar button {
        background: transparent;
    }

        .navbar button[type=submit] {
            padding-right: 0;
        }

            .navbar button[type=submit] span {
                transition: 0.3s ease-in-out;
            }

            .navbar button[type=submit]:hover span {
                transform: scale(1.3) rotate(90deg);
            }

    .navbar form {
        padding: 0;
    }

        .navbar form .form-control {
            border: 0;
            border-radius: 0;
            color: black;
            font-weight: bold;
            background: rgba(255, 255, 255, 0.7);
            transition: 0.2s ease-in-out;
        }

            .navbar form .form-control:hover {
                background: white;
            }

    .navbar .dropdown .fa-caret-down {
        padding-left: 3px;
        font-size: 18px;
        transition: 0.4s ease;
    }

    .navbar .dropdown.open {
        background-color: rgba(255, 255, 255, 0.2);
        font-size: 14px;
    }

        .navbar .dropdown.open .link {
            width: 100%;
            visibility: visible;
            font-size: 14px;
            padding: 0 5px 0 5px;
        }

        .navbar .dropdown.open .dropdown-toggle {
            font-size: 14px;
        }

        .navbar .dropdown.open .fa-caret-down {
            transform: rotate(180deg);
        }

    .navbar .dropdown .dropdown-menu {
        min-width: 0px !important;
        width: 100%;
        background: #ff5858;
        text-align: center;
        border-radius: 0;
    }

        .navbar .dropdown .dropdown-menu li, .navbar .dropdown .dropdown-menu a {
            color: white;
            font-size: 14px;
            line-height: 30px;
        }

            .navbar .dropdown .dropdown-menu li:hover, .navbar .dropdown .dropdown-menu a:hover {
                color: white;
                letter-spacing: 1px;
                background: transparent;
            }

        .navbar .dropdown .dropdown-menu a {
            padding: 0 15px 0 15px;
        }

@media (max-width: 769px) {
    .navbar .link {
        padding-left: 10px;
        visibility: visible;
        width: 100%;
        font-size: 14px;
    }

    .navbar .navbar-brand .link {
        visibility: hidden;
    }

    .dropdown .dropdown-menu {
        text-align: left !important;
    }

    button[type=submit] {
        width: 50%;
        float: left;
    }

    .navbar-form {
        border: 0;
    }

    .form-group {
        padding: 0;
        margin: 0;
    }

        .form-group input {
            width: 50%;
            float: left;
        }
}
// Open close dropdown on click
$("li.dropdown").click(function () {
    if ($(this).hasClass("open")) {
        $(this).find(".dropdown-menu").slideUp("fast");
        $(this).removeClass("open");
    }
    else {
        $(this).find(".dropdown-menu").slideDown("fast");
        $(this).toggleClass("open");
    }
});

// Close dropdown on mouseleave
$("li.dropdown").mouseleave(function () {
    $(this).find(".dropdown-menu").slideUp("fast");
    $(this).removeClass("open");
});

// Navbar toggle
$(".navbar-toggle").click(function () {
    $(".navbar-collapse").toggleClass("collapse").slideToggle("fast");
});

// Navbar colors
$("#nav-colors > .btn").click(function () {
    if ($(this).is("#pink")) {
        $(".navbar").css("background", "linear-gradient(to right, #ff5858, #f857a6)");
        $(".dropdown-menu").css("background", "#ff5858");
    }
    else if ($(this).is("#red")) {
        $(".navbar").css("background", "linear-gradient(to right, #d31027, #ea384d)");
        $(".dropdown-menu").css("background", "#d31027");
    }
    else if ($(this).is("#purple")) {
        $(".navbar").css("background", "linear-gradient(to right, #41295a, #2f0743)");
        $(".dropdown-menu").css("background", "#41295a");
    }
    else if ($(this).is("#blue")) {
        $(".navbar").css("background", "linear-gradient(to right, #396afc, #2948ff)");
        $(".dropdown-menu").css("background", "#396afc");
    }
    else if ($(this).is("#green")) {
        $(".navbar").css("background", "linear-gradient(to right, #add100, #7b920a)");
        $(".dropdown-menu").css("background", "#add100");
    }
    else if ($(this).is("#yellow")) {
        $(".navbar").css("background", "linear-gradient(to right, #f7971e, #ffd200)");
        $(".dropdown-menu").css("background", "#f7971e");
    }
    else if ($(this).is("#orange")) {
        $(".navbar").css("background", "linear-gradient(to right, #e43a15, #e65245)");
        $(".dropdown-menu").css("background", "#e43a15");
    }
})

// Font colors
$("#font-colors > .btn").click(function () {
    if ($(this).is("#white")) {
        $(".navbar .fa, .link, a").css("color", "white");
        $(".icon-bar").css("background", "white");
    }
    else if ($(this).is("#black")) {
        $(".navbar .fa, .link, a").css("color", "black");
        $(".icon-bar").css("background", "black");
    }
})

// edges
$("#edges > .btn").click(function () {
    if ($(this).is("#rounded")) {
        $(".navbar, .form-control").css("border-radius", "8px");
        if ($(window).width() > 768) {
            $(".dropdown-menu").css({
                "border-bottom-right-radius": "8px",
                "border-bottom-left-radius": "8px"
            });
        }
    }
    else if ($(this).is("#square")) {
        $(".navbar, .form-control").css("border-radius", "0");
        $(".dropdown-menu").css({
            "border-bottom-right-radius": "0",
            "border-bottom-left-radius": "0"
        });
    }
})
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- this script got from www.frontendfreecode.com -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<style>
@import url("https://fonts.googleapis.com/css?family=Roboto");

body {
    margin: 10%;
    color: white;
    background: #111111;
    font-family: "Roboto", sans-serif;
}

#nav-colors, #font-colors, #edges {
    margin-top: 10px;
}

    #nav-colors .btn, #font-colors .btn, #edges .btn {
        display: inline-block;
        padding: 10px;
        margin: 0 5px;
        border: 2px solid #111111;
        transition: 0.2s ease;
    }

        #nav-colors .btn:hover, #font-colors .btn:hover, #edges .btn:hover {
            border: 2px solid white;
        }

    #nav-colors #pink {
        background: linear-gradient(to right, #ff5858, #f857a6);
    }

    #nav-colors #red {
        background: linear-gradient(to right, #d31027, #ea384d);
    }

    #nav-colors #purple {
        background: linear-gradient(to right, #41295a, #2f0743);
    }

    #nav-colors #blue {
        background: linear-gradient(to right, #396afc, #2948ff);
    }

    #nav-colors #green {
        background: linear-gradient(to right, #add100, #7b920a);
    }

    #nav-colors #yellow {
        background: linear-gradient(to right, #f7971e, #ffd200);
    }

    #nav-colors #orange {
        background: linear-gradient(to right, #e43a15, #e65245);
    }

    #font-colors #white {
        background: white;
    }

    #font-colors #black {
        background: black;
    }

    #edges #rounded {
        background: black;
    }

    #edges #square {
        background: black;
        border-radius: 0px;
    }

        #edges #rounded:hover, #edges #square:hover {
            color: white;
        }

.navbar {
    border: 0;
    border-radius: 0;
    background: linear-gradient(to right, #ff5858, #f857a6);
}

    .navbar .nav li > a, .navbar .navbar-brand {
        max-height: 50px;
        width: auto;
        background: transparent !important;
        font-size: 18px;
        transition: 0.2s ease-in-out;
    }

        .navbar .nav li > a:hover, .navbar .navbar-brand:hover {
            background-color: rgba(255, 255, 255, 0.2);
            font-size: 14px;
        }

            .navbar .nav li > a:hover .link, .navbar .navbar-brand:hover .link {
                width: 100%;
                padding: 0 5px 0 5px;
                visibility: visible;
                font-size: 14px;
            }

    .navbar .link {
        width: 0;
        font-family: "Roboto", sans-serif;
        transition: 0.2s ease-in-out;
        visibility: hidden;
        font-size: 0px;
    }

    .navbar span {
        color: white;
    }

    .navbar .navbar-toggle {
        padding-right: 0;
    }

        .navbar .navbar-toggle .icon-bar {
            background: white;
        }

    .navbar .navbar-collapse {
        display: none;
    }

    .navbar button {
        background: transparent;
    }

        .navbar button[type=submit] {
            padding-right: 0;
        }

            .navbar button[type=submit] span {
                transition: 0.3s ease-in-out;
            }

            .navbar button[type=submit]:hover span {
                transform: scale(1.3) rotate(90deg);
            }

    .navbar form {
        padding: 0;
    }

        .navbar form .form-control {
            border: 0;
            border-radius: 0;
            color: black;
            font-weight: bold;
            background: rgba(255, 255, 255, 0.7);
            transition: 0.2s ease-in-out;
        }

            .navbar form .form-control:hover {
                background: white;
            }

    .navbar .dropdown .fa-caret-down {
        padding-left: 3px;
        font-size: 18px;
        transition: 0.4s ease;
    }

    .navbar .dropdown.open {
        background-color: rgba(255, 255, 255, 0.2);
        font-size: 14px;
    }

        .navbar .dropdown.open .link {
            width: 100%;
            visibility: visible;
            font-size: 14px;
            padding: 0 5px 0 5px;
        }

        .navbar .dropdown.open .dropdown-toggle {
            font-size: 14px;
        }

        .navbar .dropdown.open .fa-caret-down {
            transform: rotate(180deg);
        }

    .navbar .dropdown .dropdown-menu {
        min-width: 0px !important;
        width: 100%;
        background: #ff5858;
        text-align: center;
        border-radius: 0;
    }

        .navbar .dropdown .dropdown-menu li, .navbar .dropdown .dropdown-menu a {
            color: white;
            font-size: 14px;
            line-height: 30px;
        }

            .navbar .dropdown .dropdown-menu li:hover, .navbar .dropdown .dropdown-menu a:hover {
                color: white;
                letter-spacing: 1px;
                background: transparent;
            }

        .navbar .dropdown .dropdown-menu a {
            padding: 0 15px 0 15px;
        }

@media (max-width: 769px) {
    .navbar .link {
        padding-left: 10px;
        visibility: visible;
        width: 100%;
        font-size: 14px;
    }

    .navbar .navbar-brand .link {
        visibility: hidden;
    }

    .dropdown .dropdown-menu {
        text-align: left !important;
    }

    button[type=submit] {
        width: 50%;
        float: left;
    }

    .navbar-form {
        border: 0;
    }

    .form-group {
        padding: 0;
        margin: 0;
    }

        .form-group input {
            width: 50%;
            float: left;
        }
}
</style>

</head>
<body>
<div id="nav-colors">
    Navbar
    <button id="pink" class="btn"></button>
    <button id="red" class="btn"></button>
    <button id="purple" class="btn"></button>
    <button id="blue" class="btn"></button>
    <button id="green" class="btn"></button>
    <button id="yellow" class="btn"></button>
    <button id="orange" class="btn"></button>
</div>
<div id="font-colors">
    Font
    <button id="white" class="btn"></button>
    <button id="black" class="btn"></button>
</div>
<div id="edges">
    Edges
    <button id="rounded" class="btn">Rounded</button>
    <button id="square" class="btn">Square</button>
</div>
<h1> Bootstrap Navbar</h1>
<nav class="navbar">
    <div class="container-fluid">
        <!-- Nav Header -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><span class="fa fa-home"></span><span class="link"> Home</span></a>
        </div>
        <!-- Nav Collapse -->
        <div class="navbar-collapse collapse" id="collapse-1">
            <!-- Nav Left -->
            <ul class="nav navbar-nav">
                <!-- Products -->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <span class="fa fa-tags"></span><span class="link"> Products</span> <span class="fa fa-caret-down"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><span class="fa fa-tag"></span> Catalogue 1</a></li>
                        <li><a href="#"><span class="fa fa-tag"></span> Catalogue 2</a></li>
                    </ul>
                </li>
                <!-- Services -->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <span class="fa fa-gears"></span><span class="link"> Services</span> <span class="fa fa-caret-down"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><span class="fa fa-gear" /></span> Service 1</a></li>
                        <li><a href="#"><span class="fa fa-gear" /></span> Service 2</a></li>
                        <li><a href="#"><span class="fa fa-gear" /></span> Service 3</a></li>
                    </ul>
                </li>
                <!-- About -->
                <li><a href="#"><span class="fa fa-info-circle"></span><span class="link"> About</span></a></li>
                <!-- Contact -->
                <li><a href="#"><span class="fa fa-phone"></span><span class="link"> Contact</span></a></li>
            </ul>
            <!-- Nav Right -->
            <form class="navbar-form navbar-right">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn"><span class="fa fa-search"></span></button>
            </form>
        </div>
    </div>
</nav>
<div id="bcl"><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a></div>
<script>
// Open close dropdown on click
$("li.dropdown").click(function () {
    if ($(this).hasClass("open")) {
        $(this).find(".dropdown-menu").slideUp("fast");
        $(this).removeClass("open");
    }
    else {
        $(this).find(".dropdown-menu").slideDown("fast");
        $(this).toggleClass("open");
    }
});

// Close dropdown on mouseleave
$("li.dropdown").mouseleave(function () {
    $(this).find(".dropdown-menu").slideUp("fast");
    $(this).removeClass("open");
});

// Navbar toggle
$(".navbar-toggle").click(function () {
    $(".navbar-collapse").toggleClass("collapse").slideToggle("fast");
});

// Navbar colors
$("#nav-colors > .btn").click(function () {
    if ($(this).is("#pink")) {
        $(".navbar").css("background", "linear-gradient(to right, #ff5858, #f857a6)");
        $(".dropdown-menu").css("background", "#ff5858");
    }
    else if ($(this).is("#red")) {
        $(".navbar").css("background", "linear-gradient(to right, #d31027, #ea384d)");
        $(".dropdown-menu").css("background", "#d31027");
    }
    else if ($(this).is("#purple")) {
        $(".navbar").css("background", "linear-gradient(to right, #41295a, #2f0743)");
        $(".dropdown-menu").css("background", "#41295a");
    }
    else if ($(this).is("#blue")) {
        $(".navbar").css("background", "linear-gradient(to right, #396afc, #2948ff)");
        $(".dropdown-menu").css("background", "#396afc");
    }
    else if ($(this).is("#green")) {
        $(".navbar").css("background", "linear-gradient(to right, #add100, #7b920a)");
        $(".dropdown-menu").css("background", "#add100");
    }
    else if ($(this).is("#yellow")) {
        $(".navbar").css("background", "linear-gradient(to right, #f7971e, #ffd200)");
        $(".dropdown-menu").css("background", "#f7971e");
    }
    else if ($(this).is("#orange")) {
        $(".navbar").css("background", "linear-gradient(to right, #e43a15, #e65245)");
        $(".dropdown-menu").css("background", "#e43a15");
    }
})

// Font colors
$("#font-colors > .btn").click(function () {
    if ($(this).is("#white")) {
        $(".navbar .fa, .link, a").css("color", "white");
        $(".icon-bar").css("background", "white");
    }
    else if ($(this).is("#black")) {
        $(".navbar .fa, .link, a").css("color", "black");
        $(".icon-bar").css("background", "black");
    }
})

// edges
$("#edges > .btn").click(function () {
    if ($(this).is("#rounded")) {
        $(".navbar, .form-control").css("border-radius", "8px");
        if ($(window).width() > 768) {
            $(".dropdown-menu").css({
                "border-bottom-right-radius": "8px",
                "border-bottom-left-radius": "8px"
            });
        }
    }
    else if ($(this).is("#square")) {
        $(".navbar, .form-control").css("border-radius", "0");
        $(".dropdown-menu").css({
            "border-bottom-right-radius": "0",
            "border-bottom-left-radius": "0"
        });
    }
})
</script>

</body>
</html>
Preview