Markup of the header + Styling of the header and adding scrollspy

<header class="header" id="header">
        <nav class="navbar navbar-expand-lg navbar-light fixed-top bg-light">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler"
                aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="container">
                <div class="collapse navbar-collapse" id="navbarToggler">
                    <a class="navbar-brand" href="#"><img src="logo.png" alt="logo"> </a>
                    <ul class="navbar-nav ml-auto mt-lg-0">
                        <li class="nav-item">
                            <a class="nav-link" href="#home">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#about">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#portfolio">Portfolio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#blog">Blog</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
.navbar{
    z-index: 15;
    padding-top: 20px;
    background: transparent !important;
    transition: 1s ease-in-out;
}
.navbar-brand{
    color: #fff !important;
}
.navbar-nav li a{
    color: #fff !important;
    transition: .5s all ease;
    position: relative;
}
.navbar-nav li a:hover,
.navbar-nav li a.active
{
    color: var(--special-color) !important;
}
.navbar-nav li{
    margin-left: 3px;
    overflow: hidden;
}
.navbar-nav li a::before,
.navbar-nav li a.active::before
{
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    top: 50%;
    right: 100%;
    background: var(--special-color);
    transition: .5s all ease;
    transform: rotate(-12deg);
}
.navbar-nav li a:hover::before,
.navbar-nav li a.active::before{
    right: 0;
}
.fixed{
    background-color: #202020 !important;
    padding-top: 5px;
    transition: 1s ease-in-out;
}
$(window).bind('scroll', function () {
    if ($(window).scrollTop() > 150) {
        $('.navbar').addClass('fixed');
    } else {
        $('.navbar').removeClass('fixed');
    }
});

Leave a Reply

Your email address will not be published. Required fields are marked *