Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<body data-spy="scroll" data-target="#secondary-nav" data-offset="55">
  
<header id="secondary-nav" class="secondary-nav shadow-sm position-sticky" style="top:0;">
<div class="container">
<nav class="vam nav scroll dragger scroller">
    <li class="nav-item dropdown">
      <a href="#" class="nav-link dropdown-toggle" data-id="overview" aria-controls="overview">Overview</a>
      <div id="overview" class="submenu">
        <div class="container scroll dragger scroller">
          <a class="dropdown-item" href="#fat">Project Summary</a>
          <a class="dropdown-item" href="#two">Construction Phases</a>
          <a class="dropdown-item" href="#three">Amenities</a>
          <a class="dropdown-item" href="#">Specifications</a>
        </div>
      </div>
    </li>
    <li class="nav-item"><a href="#mdo" class="nav-link">Floor Plans & Pricing</a></li>
    <li class="nav-item"><a href="#one" class="nav-link">Location</a></li>
    <li class="nav-item"><a href="#three" class="nav-link">Resale/Investor Flats</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Home Loan</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item dropdown">
      <a href="#" class="nav-link dropdown-toggle" data-id="more" aria-controls="more">More</a>
      <div id="more" class="submenu">
        <div class="container scroll dragger scroller" aria-labelledby="more">
          <a class="dropdown-item" href="#">Similar Projects</a>
          <a class="dropdown-item" href="#">Discussions</a>
          <a class="dropdown-item" href="#">Reviews</a>
          <a class="dropdown-item" href="#">Report Error</a>
        </div>
      </div>
    </li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Developer</a></li>
</nav>
  
</div>
</header>



<div id="tabcontent" data-offset="0">
  <h4 id="fat">@fat</h4>
  <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
  <h4 id="mdo">@mdo</h4>
  <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
  <h4 id="one">one</h4>
  <p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
  <h4 id="two">two</h4>
  <p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
  <h4 id="three">three</h4>
  <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.</p>
  
  <h4 id="four">three</h4>
  <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.</p>
</div>
  
</body>
              
            
!

CSS

              
                body {position:relative;}

header.secondary-nav .scroll {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

header.secondary-nav .scroll::-webkit-scrollbar {
  display: none;
}

header.secondary-nav .submenu {
  display:none;
  position:absolute;
  left:0;
  top:100%;
  width:100%;
  height: 0;
  clear: both;
  background-color: #fbf7fc;
  box-shadow: 0 .3rem .3rem rgba(0,0,0,.15)!important;
}

header.secondary-nav .submenu.visible {
  display:block;
  height: auto;
  border-top: 1px solid #e8e8e8;
}

header.secondary-nav .dropdown {position:inherit;}
header.secondary-nav .dropdown-item {display: inline-block; font-size:0.8rem; font-weight:500; width:auto; clear:inherit; padding: 12px;}
header.secondary-nav .dropdown-toggle.visible {background:#fbf7fc}
header.secondary-nav .dropdown-item.active, header.secondary-nav .dropdown-item:active, header.secondary-nav .dropdown-item:hover  {background:#fff; color:#6a2c79;}

/*Don't Remove this give class/id if required*/
header.secondary-nav, header.secondary-nav nav {
  font-size: 0;
}

header.secondary-nav {
  background-color: #fff;
  // border-top: 1px solid #e2e2e3;
  // border-bottom: 1px solid #e2e2e3;
  position: relative;
  z-index: 2;
  clear: both;
  width: 100%;
  /* Force Hardware Acceleration */
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
}

header.secondary-nav .vam {
  display: inline-block;
  vertical-align: middle;
}

header.secondary-nav .nav {
  width: 100%;
}

header.secondary-nav .nav-item {
  display: inline-block;
  vertical-align: middle;
  // cursor: pointer;
}

header.secondary-nav .nav-link{
  padding: 18px 14px;
  font-size: 0.82rem;
  font-weight: 600;
}

@media (max-width: 768px) {
  header.secondary-nav::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    height: 100%;
    width: 35px;
    background: linear-gradient(to left, #e3e3e3, rgba(37, 40, 61, 0));
    pointer-events: none;
    transition: opacity .2s;
  }
  header.secondary-nav .nav-link {padding: 14px 10px;}
}

header.secondary-nav .nav-link.active {color: #000; box-shadow: inset 0px -3px 0px 0px #fdac00;}

              
            
!

JS

              
                (function (window, document, undefined) {
  'use strict';
  
  // Select nav items that have submenus
  var hasSubmenu = document.querySelectorAll('[data-id]');
  var visible = 'visible';
  var i = 0;
  
  // Show the submenu by toggling the relevant class names
  function showSubmenu (event) {
    // We lose reference of this when filtering the nav items
    var self = this;
    
    // Select the relevant submenu, by the data-id attribute
    var submenu = document.getElementById(self.dataset.id);
    
    // Probably best to prevent clicks through
    event.preventDefault();
    if(!$(submenu).hasClass(visible)){
      $('.nav-link').removeClass(visible);
      $('.submenu').removeClass(visible);
    }

    self.classList.toggle(visible);
    submenu.classList.toggle(visible);
  }
  
  // Remove the active class
  function removeChildClass(el) {
    // Check if it exists, then remove
    if ( el.classList.contains(visible) ) {
      el.classList.remove(visible);
    }
  }
  
  // On clicks show submenus
  for ( i = 0; i < hasSubmenu.length; i++ ) {
    hasSubmenu[i].addEventListener('click', showSubmenu);
  }
})(window, document);


/*---------- DRAGGER ----------*/
$(document).ready(function() {
  $('.dragger').mousedown(function (event) {
    $(this)
      .data('down', true)
      .data('x', event.clientX)
      .data('scrollLeft', this.scrollLeft)
      .addClass("dragging");

    return false;
  }).mouseup(function (event) {
    $(this)
      .data('down', false)
      .removeClass("dragging");
  }).mousemove(function (event) {
    if ($(this).data('down') == true) {
      this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
    }
  }).mousewheel(function (event, delta) {
    this.scrollLeft -= (delta * 30);
  }).css({
    'overflow' : 'hidden',
    'cursor' : '-moz-grab'
  });
  $(window).mouseout(function (event) {
    if ($('.team-form-data').data('down')) {
      try {
        if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
          $('.team-form-data').data('down', false);
        }
      } catch (e) {}
    }
  });
});


/*---------- SCROLLER ----------*/
jQuery(function ($) {
    $.fn.hScroll = function (amount) {
        amount = amount || 120;
        $(this).bind("DOMMouseScroll mousewheel", function (event) {
            var oEvent = event.originalEvent, 
                direction = oEvent.detail ? oEvent.detail * -amount : oEvent.wheelDelta, 
                position = $(this).scrollLeft();
            position += direction > 0 ? -amount : amount;
            $(this).scrollLeft(position);
            event.preventDefault();
        })
    };
});

$(document).ready(function() {
    $('.scroller').hScroll(); // You can pass (optionally) scrolling amount
});

/*---- ANCHOR LINK ANIMATION WITH OFFSET ----*/
$(".secondary-nav a[href^='#']").on('click', function(event) {
  var target = this.hash;

  event.preventDefault();

  var navOffset = $('.secondary-nav').height();

  return $('html, body').animate({
    scrollTop: $(this.hash).offset().top - navOffset
  }, 300, function() {
    return window.history.pushState(null, null, target);
  });
});

$(".secondary-nav li").click(function() {
  centerLI(this, '.vam');
  // Dropdown Toggle
  if(!$(this).hasClass('dropdown')){
    $('.nav-link').removeClass('visible');
    $('.submenu').removeClass('visible');
  }
});

//http://stackoverflow.com/a/33296765/350421
 function centerLI(target, outer) {
   var out = $(outer);
   var tar = $(target);
   var x = out.width() - 50;
   var y = tar.outerWidth(true);
   var z = tar.index();
   var q = 0;
   var m = out.find('li');
   for (var i = 0; i < z; i++) {
     q += $(m[i]).outerWidth(true);
   }
   //out.scrollLeft(Math.max(0, q - (x - y)/2));
   out.animate({
     scrollLeft: Math.max(0, q - (x - y) / 2)
   }, 500);

 }

// Dropdown Close on Body click
$(document).mouseup(function(e) 
{
    var container = $("#secondary-nav");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        $('.nav-link').removeClass('visible');
        $('.submenu').removeClass('visible');
    }
});
              
            
!
999px

Console