Markup of the header section

<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="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="container">
            <div class="collapse navbar-collapse" id="navbarTogglerDemo01">  
                <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;
}
<body id="top" style="position: relative;" data-spy="scroll" data-target=".navbar" data-offset="200">

Leave a Reply

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