Bootstrap 3 Mega Menu

Bootstrap 3 Mega Menu

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.js"></script>
<script src="http://fonts.googleapis.com/css?family=Lato:100,300,100italic"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<div class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-default">
        <li><a href="#">Home</a></li>
      </ul>
    </div>
  </div>
</div>
<div class="container">
  
  <p>
    Volutpat est velit egestas dui id ornare arcu odio. Quis commodo odio aenean sed adipiscing diam. Varius duis at consectetur lorem. Vulputate enim nulla aliquet porttitor. Tortor aliquam nulla facilisi cras fermentum. Leo vel fringilla est ullamcorper eget nulla. Viverra nam libero justo laoreet sit amet cursus. Diam maecenas sed enim ut sem. Feugiat pretium nibh ipsum consequat nisl vel pretium. Adipiscing vitae proin sagittis nisl rhoncus. Sit amet mattis vulputate enim nulla. Lectus nulla at volutpat diam ut venenatis tellus. Nulla facilisi nullam vehicula ipsum a arcu. Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. Nullam eget felis eget nunc lobortis mattis aliquam faucibus. Sapien...

CSS

.cs-heading {
    margin-left: 15px;
    font-size: 2em;   
}
.cat-promo {
    font-size: 14px;    
    font-weight: 600;
    white-space: normal;
    padding: 4px 4px;
    text-align: center;
    line-height: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

}
.cat-promo-active {
    color: red;    
}
.promo-cat-nav {
    position: sticky;
    top: 0;
    z-index: 99;
    background: #000;
    padding-bottom: 8px;
    padding-top: 9px;
    max-height: 63px;
    min-height: 63px;
}
#owl-promo .owl-item{
    display: flex;
    justify-content: center;
    align-items: center;
}
#owl-promo .item{
    border: 1px solid #83B03D;
    border-radius: 4px;
    background: #83B03D;
    width: 185px;
    height: 40px;
    margin: 0 15px;
}
@media (max-width: 767px) {    
    #_navbar-cat-promo { display: none;}   
}

JavaScript

$(document).ready(function(){
    var owl = $("#owl-promo");
    owl.owlCarousel({
        itemsCustom : [
            [0, 1],
            [340, 2],
            [580, 3],
            [992, 4],
            [1200, 5]
        ],
        navigation : true,
        theme: "",
        navigationText : ["<i class='fa fa-angle-left'></i>","<i class='fa fa-angle-right'></i>"]
    });
    if($( window ).width() > 767) {
      var stickySidebar = $('#_navbar-cat-promo').offset().top;

      $(window).scroll(function() {
        if ($(window).scrollTop() > stickySidebar) {
          $('#_navbar-cat-promo').addClass('promo-cat-nav');
        }
        else {
          $('#_navbar-cat-promo').removeClass('promo-cat-nav');
        }
      });
    }

    $(window).resize(function(){
      if($( window ).width() > 767) {
        var stickySidebar = $('#_navbar-cat-promo').offset().top

        $(window).scroll(function() {
          if ($(window).scrollTop() > stickySidebar) {
            $('#_navbar-cat-promo').addClass('promo-cat-nav');
          }
          else {
            $('#_navbar-cat-promo').removeClass('promo-cat-nav');
          }
        });
      } else {
        $(window).scroll(function() {
          $('#_navbar-cat-promo').removeClass('promo-cat-nav');
        });
      }
    });
});
function goToByScroll(id, y){
    $('html,body').animate({scrollTop: $("#"+id).offset().top-y},'slow');
}

function goToCat(element){
    var id = element.id;    
    goToByScroll('_section'+id, 40);   
}