Responsive Navigation using Bootstrap 4

In this example below you will see how to do a Responsive Navigation using Bootstrap 4 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by brendansparrow, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright brendansparrow ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Responsive Navigation using Bootstrap 4</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <header class="site-header">
  <div class="container">
  <div class="row">
    <div class="col-12">
      <section class="contact-details">
        <p class="pull-right ml-auto"><strong>T:</strong>&nbsp;<a href="tel:">telephone</a>&nbsp;&#124;&nbsp;<strong>E:</strong>&nbsp;<a href="mailto:surveyors@email.com">surveyors@email.com</a></p>
      </section>
    </div>
  </div>
</div>
      <div class="container">
        <div class="row">
          <div class="col-12">
            <nav class="navbar navbar-expand-lg navbar-light">
        <a class="navbar-brand" href="#">
      <span>Company<br/>Website</span><br/><span class="tagline">Chartered Surveyors</span>
          <img class="logo" src="https://www.fowlersandford.com/images/logo.jpg" alt="">
        </a>
        <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse" id="navbarCollapse" style="">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About Us</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" id="nav-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Our Services</a>
              <div class="dropdown-menu" aria-labelledby="nav-dropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Property Search</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contact Us</a>
            </li>
          </ul>
    <form class="searchbox">
        <input type="search" placeholder="Search..." name="search" class="searchbox-input" onkeyup="buttonUp();" required>
        <input type="submit" class="searchbox-submit">
        <span class="searchbox-icon"><i class="fa fa-search">
          </i></span>
    </form>
        </div>
      </nav>
          </div>
        </div>
  </div>
    </header>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0-next.1/esm/popper.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/brendansparrow/responsive-navigation-using-bootstrap-4-pVbdrM */
body {
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 300;
  background-color: #dedeed;
}

.site-header {
  background-color: rgba(255, 255, 255, 0.6);
}

.contact-details {
  font-size: 0.875em;
  height: 1.5em;
}

.contact-details a {
  color: inherit;
}

@media screen and (min-width: 768px) {
  .contact-details {
    padding: 0.5rem;
    font-size: 1rem;
  }
}
.navbar-nav {
  font-size: 1em;
  margin-right: 4rem;
}

.search-form .form-control {
  max-width: calc(100% - 44px);
  border: none;
}
.search-form .form-control:focus {
  outline: none;
}

.search-form .btn-link {
  color: inherit;
}

@media screen and (max-width: 575px) {
  .search-form .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .search-form .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
@media (min-width: 1200px) {
  .navbar-nav {
    font-size: 1.125em;
    padding-right: 1em;
  }

  .navbar .navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
.btn-primary {
  background-color: #ff3300;
  border-color: #ff3300;
}
.btn-primary:hover {
  background-color: #cc2900;
  border-color: #cc2900;
}

.navbar-brand .logo {
  line-height: 0.75;
  margin: 0;
}

.navbar-brand span:first-child {
  font-family: "Helvetica", sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 0;
  color: #003768;
  margin: 0;
  padding: 0;
}

.navbar-brand .tagline {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 0 !important;
  color: #FF3300;
}

.searchbox {
  display: block;
  position: absolute;
  right: 0;
  min-width: 3.6em;
  width: 0%;
  height: 3.6em;
  float: right;
  overflow: hidden;
  transition: width 0.3s;
}

.searchbox-input {
  top: 0;
  right: 0;
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  height: 4em;
  margin: 0;
  padding: 0px 3em 0px 1.25em;
  font-size: 1.25em;
}

.searchbox-input::-webkit-input-placeholder,
.searchbox-input:-moz-placeholder,
.searchbox-input::-moz-placeholder,
.searchbox-input:-ms-input-placeholder {
  color: #d74b4b;
}

.searchbox-icon,
.searchbox-submit {
  width: 4em;
  height: 4em;
  display: block;
  position: absolute;
  top: 0;
  font-size: 1.25em;
  right: 0;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  color: #003768;
  background: rgba(255, 255, 255, 0.6);
}

.searchbox-open {
  width: 100%;
  width: calc(100% - 50vw);
}


/*Downloaded from https://www.codeseek.co/brendansparrow/responsive-navigation-using-bootstrap-4-pVbdrM */
// This could be improved by following this tutorial to add an animated search input: https://tympanus.net/codrops/2013/06/26/expanding-search-bar-deconstructed/
 $(document).ready(function(){
            var submitIcon = $('.searchbox-icon');
            var inputBox = $('.searchbox-input');
            var searchBox = $('.searchbox');
            var isOpen = false;
            submitIcon.click(function(){
                if(isOpen == false){
                    searchBox.addClass('searchbox-open');
                    inputBox.focus();
                    isOpen = true;
                } else {
                    searchBox.removeClass('searchbox-open');
                    inputBox.focusout();
                    isOpen = false;
                }
            });  
             submitIcon.mouseup(function(){
                    return false;
                });
            searchBox.mouseup(function(){
                    return false;
                });
            $(document).mouseup(function(){
                    if(isOpen == true){
                        $('.searchbox-icon').css('display','block');
                        submitIcon.click();
                    }
                });
        });
            function buttonUp(){
                var inputVal = $('.searchbox-input').val();
                inputVal = $.trim(inputVal).length;
                if( inputVal !== 0){
                    $('.searchbox-icon').css('display','none');
                } else {
                    $('.searchbox-input').val('');
                    $('.searchbox-icon').css('display','block');
                }
            }

Comments