January 29, 2022

Bootstrap 4 sticky header with searchbar

<div class="slider d-flex align-items-center"> 
              <div class="container">
      <div class="info">
      <h1 class="text-center text-white">FIND WHAT YOU NEED! </h1>
      <p>Discover top rated hotels, shops and restaurants around the world</p>
                  <form action="" class="form">
                      <div class="row">
                      <div class="col-lg-3 col-md-6 p-0">
                          <input type="text" name="" id="" class="form-control radius" placeholder="What are you looking for...">
            <i class="fa fa-search"></i>
                      <div class="col-lg-3 col-md-6 p-0">
                              <input type="text" name="" id="" class="form-control radius-0" placeholder="Budget">
                <i class="fa fa-map-marker"></i>
                          <div class="col-lg-3 col-md-6 p-0">
                                  <select name="" id="" class="form-control radius-0">
                                      <option value="">Rent</option>
                                      <option value="">Buy</option>
                              <div class="col-lg-3 col-md-6 p-0">
                                      <button class="btn btn-primary btn-block btn-md border-0" type="submit">Submit</button>

            <div class="inner-page"></div>


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        @import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500&display=swap');
        body { font-family: 'Poppins', sans-serif; font-size: 14px;}
        header { position: absolute; width: 100%; z-index: 9999; color: #fff; transition: all 1s;}
        header .logo { margin: 12px 15px; font-size: 22px;}
        .btn-right {     margin-top: 12px; }
        .slider { background: url(https://images.pexels.com/photos/1864902/pexels-photo-1864902.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940); width: 100%; background-size: cover; height: 100vh; }
        .slider:before { position: absolute; content: ''; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); z-index: 9;}
        #tolmatol-navbar ul li { margin: 0px 5px;}
        #tolmatol-navbar ul li a { color: #fff;}
        .inner-page { height: 300px;}  
        header.navScroll { margin-top: -100px; }
        header.navScroll.fixed {  margin-top: 0px;  position: fixed;  top: 0px; background:#fff;}
        header.navScroll.fixed #tolmatol-navbar ul li a { color: #333;} 
        header.navScroll.fixed .logo { margin: 12px 15px; font-size: 22px; color: #333}
        a.dropdown-item { color: #333;}
    .form-control.radius { border-radius:4px 0px 0px 4px;}
    .form-control.radius-0 { border-radius:1px 0px 0px 1px;}
    .form-control { padding:0; margin:0;}
    .form .form-control { border-right:solid 1px #ccc;}
    .info { position:relative; z-index:999; color:#fff; text-align:center; margin-bottom:40px;}
    .form i {
    position: absolute;
    z-index: 999;
    color: #ccc;
    right: 10px;
    top: 30%;
    font-size: 21px;
        @media(max-width:991px) { 
          [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) { outline: none; box-shadow: none;}
          .menu-icon { width: 30px;
    height: 3px;
    background: #fff;
    display: block;
    margin: 2px 0px 7px;
    line-height: 45px;}
          #tolmatol-navbar ul li a { color: #333;}
            background: #fff; padding: 0px 40px; 
    width: 100%;
    display: block;
    float: left;
    position: fixed;
    right: 0;

          form .form-control { margin-bottom: 5px;}


        form { z-index: 999; position: relative;}
        form .form-control { border-radius: 0; padding: 8px 16px; height: 50px; border: none; box-shadow: none;} 
        form button { padding: 8px 16px; height: 50px; border-radius:0px 4px 4px 0px !important; }


<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
          <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    var header = $('header');
        scroll = $(window).scrollTop(); 
    if (scroll >= 50) header.addClass('fixed');
    else header.removeClass('fixed');
    if (scroll >= 25) header.addClass('navScroll');
    else header.removeClass('navScroll');


Leave a Reply

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