Bootstrap Snippet Beautiful fixed header with responsive Bootstrap 4 using HTML CSS 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="//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 ---------->
<header class="header_area">
            <div class="main_menu">
                <nav class="navbar navbar-expand-lg navbar-light">
                    <div class="container">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <a class="navbar-brand logo_h" href="index.html"><img src="img/logo.png" alt="" /></a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
                            <ul class="nav navbar-nav menu_nav ml-auto">
                                <li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
                                <li class="nav-item"><a class="nav-link" href="feature.html">Features</a></li>
                                <li class="nav-item"><a class="nav-link" href="price.html">Price</a></li>
                                <li class="nav-item submenu dropdown">
                                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pages</a>
                                    <ul class="dropdown-menu">
                                        <li class="nav-item"><a class="nav-link" href="feature.html">Features</a></li>
                                        <li class="nav-item"><a class="nav-link" href="price.html">Price</a></li>
                                        <li class="nav-item"><a class="nav-link" href="element.html">Element</a></li>
                                    </ul>
                                </li>
                                <li class="nav-item submenu dropdown">
                                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Blog</a>
                                    <ul class="dropdown-menu">
                                        <li class="nav-item"><a class="nav-link" href="blog.html">Blog</a></li>
                                        <li class="nav-item"><a class="nav-link" href="single-blog.html">Blog Details</a></li>
                                    </ul>
                                </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
.list {
                list-style: none;
                margin: 0px;
                padding: 0px;
            }
            a {
                text-decoration: none;
                transition: all 0.3s ease-in-out;
            }
            a:hover,
            a:focus {
                text-decoration: none;
                outline: none;
            }
            .row.m0 {
                margin: 0px;
            }
            body {
                line-height: 24px;
                font-size: 14px;
                font-family: "Poppins", sans-serif;
                font-weight: normal;
                color: #7f7f7f;
                height: 1000px;
            }
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                font-family: "Poppins", sans-serif;
                font-weight: bold;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
(function ($) {
                "use strict";
                var nav_offset_top = $("header").height() + 50;
                //* Navbar Fixed
                function navbarFixed() {
                    if ($(".header_area").length) {
                        $(window).scroll(function () {
                            var scroll = $(window).scrollTop();
                            if (scroll >= nav_offset_top) {
                                $(".header_area").addClass("navbar_fixed");
                            } else {
                                $(".header_area").removeClass("navbar_fixed");
                            }
                        });
                    }
                }
                navbarFixed();
            })(jQuery);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Beautiful fixed header with responsive Bootstrap 4"
Bootstrap 4.1.1 Snippet by Shivamsemisetia

Related: See More

Questions / Comments:

"Beautiful fixed header with responsive Bootstrap 4" Bootstrap 4.1.1 Snippet by Shivamsemisetia

Related: See More

Questions / Comments:

"Beautiful fixed header with responsive Bootstrap 4"
Bootstrap 4.1.1 Snippet by Shivamsemisetia