_header.html

<!-- ======================== Navigation ======================== -->

<nav>
  <div class="container">

    <a href="index.html" class="logo">
      <h4 id="furniture" style="margin-top: 16px; "><i>Modular Furniture</i></h4>
    </a>

    <!-- ==========  Top navigation ========== -->

    <div class="navigation navigation-top clearfix">
      <ul>
        <!--add active class for current page-->
        <li class="left-side">

          <h4 id="furniture" style="margin-top: 16px;"><i>Modular Furniture</i></h4>
        </li>

        <li>
          <a href="javascript:void(0);" class="open-search"><img
              src="https://cdn-icons-png.flaticon.com/128/2989/2989907.png" width="20px" height="20px"></a>
        </li>

      </ul>
    </div>

    <!-- ==========  Main navigation ========== -->

    <div class="navigation navigation-main">
      <a href="#" class="open-search"><img src="https://cdn-icons-png.flaticon.com/128/2989/2989907.png" width="20px"
          height="20px" style="margin-top: 20px;"></a></a>

      <a href="#" class="open-menu"><img src="https://cdn-icons-png.flaticon.com/128/6015/6015685.png" width="20px"
          height="20px" style="margin-top: 20px;"></a>

      <div class="floating-menu">
        <!--mobile toggle menu trigger-->
        <div class="close-menu-wrapper">
          <span class="close-menu"><img src="https://cdn-icons-png.flaticon.com/128/1828/1828778.png" width="20px"
              height="20px" style="margin-top: 20px;"></span>
        </div>
        <ul>
          <li>
            <a href="index.html">Home
            </a>
            
          </li>
          <li>
            <a href="about.html">About Us
            </a>
          </li>
          <li>
            <a href="contact.html">Contact Us
            </a>
          </li>
          <li>
            <a href="gallery.html">gallery
            </a>
          </li>

          <li>
            <a href="design.html">Designs
            </a>
          </li>

          <li class="nav-settings">
            <a href="javascript:void(0);"><a href="home.php"><span class="nav-settings-value">Account</span></a>
            </span>
              <div class="navbar-dropdown navbar-dropdown-single">
                <div class="navbar-box">
                  <div class="box-full">
                    <div class="box clearfix">
                      <ul>
                        <li><a href="registration.html">Registration</a></li>
                        <li><a href="login.html">Login</a></li>
                        <li><a href="home.php">Account</a></li>
                        <!-- <li><a href="admin_penal.html">Admin Penal</a></li> -->
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            </li>
      </div>

      </ul>
    </div>
  </div>

  <!-- ==========  Search wrapper ========== -->

  <div class="search-wrapper">
    <input class="form-control" placeholder="Search..." />
    <button class="btn btn-outline-dark btn-sm">Search now</button>
  </div>
  </div>
  </div>
</nav>
<!-- ==================  Navigation (main menu) ================== -->
<script type="text/javascript">
  $(function () {
    var objSearch = $(".search-wrapper"),
      objLogin = $(".login-wrapper"),
      objCart = $(".cart-wrapper"),
      objMenu = $(".floating-menu"),
      objMenuLink = $(".floating-menu a"),
      $search = $(".open-search"),
      $login = $(".open-login"),
      $cart = $(".open-cart"),
      $menu = $(".open-menu"),
      $openDropdown = $(".open-dropdown"),
      $close = $(".close-menu"),
      $settingsItem = $(".nav-settings .nav-settings-list li");

    // Open/close login

    $login.on("click", function () {
      toggleOpen($(this));
      objLogin.toggleClass("open");
      closeSearch();
      closeCart();
    });

    // Open/close search bar

    $search.on("click", function () {
      toggleOpen($(this));
      objSearch.toggleClass("open");
      objSearch.find("input").focus();
      closeLogin();
      closeCart();
    });

    // Open/close cart

    $cart.on("click", function () {
      toggleOpen($(this));
      objCart.toggleClass("open");
      closeLogin();
      closeSearch();
    });

    // Settings language & currency dropdown

    $settingsItem.on("click", function () {
      var $value = $(this).closest(".nav-settings").find(".nav-settings-value");
      $value.text($(this).text());
    });

    // Mobile menu open/close

    $menu.on("click", function () {
      objMenu.addClass("expanded");
      closeSearch();
      closeLogin();
      closeCart();
    });

    // Floating menu hyperlink
    if ($("nav").hasClass("navbar-single-page")) {
      objMenuLink.on("click", function () {
        objMenu.removeClass("expanded");
      });
    }

    // Open dropdown/megamenu

    $openDropdown.on("click", function (e) {
      e.preventDefault();

      var liParent = $(this).parent().parent(),
        liDropdown = liParent.find(".navbar-dropdown");

      liParent.toggleClass("expanded");

      if (liParent.hasClass("expanded")) {
        liDropdown.slideDown();
      } else {
        liDropdown.slideUp();
      }
    });

    // Close menu (mobile)

    $close.on("click", function () {
      $("nav").find(".expanded").removeClass("expanded");
      $("nav").find(".navbar-dropdown").slideUp();
    });

    // Global functions

    function toggleOpen(el) {
      $(el).toggleClass("open");
    }

    function closeSearch() {
      objSearch.removeClass("open");
      $search.removeClass("open");
    }

    function closeLogin() {
      objLogin.removeClass("open");
      $login.removeClass("open");
    }

    function closeCart() {
      objCart.removeClass("open");
      $cart.removeClass("open");
    }

    // Sticky header
    // ----------------------------------------------------------------

    var navbarFixed = $("nav.navbar-fixed");

    // When reload page - check if page has offset
    if ($(document).scrollTop() > 94) {
      navbarFixed.addClass("navbar-sticked");
    }
    // Add sticky menu on scroll
    $(document).on("bind ready scroll", function () {
      var docScroll = $(document).scrollTop();
      if (docScroll >= 10) {
        navbarFixed.addClass("navbar-sticked");
      } else {
        navbarFixed.removeClass("navbar-sticked");
      }
    });

    var navHeight = $("nav").height();

    if ($(".owl-slider").hasClass("owl-slider-fullscreen")) {
      $(".header-content .item").height($(window).height() - navHeight - 50);
    }
  });
</script>