cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <div class="navbar navbar-default navbar-static-top" role="navigation">

  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
      </button>
      <a class="navbar-brand" href="#"><h1>Website Name</h1></a>
    </div>
    <nav class="navbar-collapse collapse">

      <ul class="nav navbar-nav">

        <li class="dropdown active" id="tt-home"><a href="#!" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-target="#">Home <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#!">Awards</a></li>
          <li><a href="#!">Beyond</a></li>
          <li><a href="#!">Beyond Children</a></li>
          <li><a href="#!">Beyond Love Within</a></li>
        </ul>
        </li>
        <li class="dropdown" id="tt-blog">
        <a href="#!" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-target="#">Blog <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#!">Biography</a></li>
          <li><a href="#!">Interviews</a></li>
          <li><a href="#!">Links</a></li>
          <li><a href="#!">Lyrics</a></li>
        </ul>
        </li>
        <li class="dropdown" id="tt-books"><a href="#!" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown" data-target="#">Books <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#!">Flagg Grove School</a></li>
          <li><a href="#!">Magazines</a></li>
          <li><a href="#!">My Collection</a></li>
          <li><a href="#!">Songbooks</a></li>
          <li><a href="#!">Tourbooks</a></li>
        </ul>
        </li>
        <li class="dropdown" id="tt-goodies">
        <a href="#!" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-target="#">Goodies  <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#!">Drawings</a></li>
          <li><a href="#!">Ecards</a></li>
          <li><a href="#!">Fanmap</a></li>
          <li><a href="#!">Fans-Tina</a></li>
          <li><a href="#!">General</a></li>
        </ul>
        </li>
        <li class="dropdown" id="tt-media">
        <a href="#!" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-target="#">Media <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#!Albums</a></li>
          <li><a href="#!">Albums-Extended</a></li>
          <li><a href="#!">7 Inch Singles</a></li>
          <li><a href="#!">12 Inch Maxi Singles</a></li>
          <li><a href="#!">CD Singles</a></li>
          <li><a href="#!">DVD-VHS-Blu-Ray</a></li>
          <li><a href="#!">Videos with others</a></li>
          <li><a href="#!">LP's</a></li>
        </ul>
        </li>
        <li class="dropdown" id="tt-news"><a href="#!" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-target="#">News <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#!">Film</a></li>
          <li><a href="#!">Photos</a></li>
          <li><a href="#!">Tour Photos 2008-2009</a></li>
          <li><a href="#!">Tours</a></li>
          <li><a href="#!">Videos</a></li>
        </ul>
        </li>
        <li class="dropdown" id="tt-contact"><a href="#!" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-target="#">Contact <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#!" target="_blank">Appearances</a></li>
          <li><a href="#!">Credits</a></li>
          <li><a href="#!">Donation</a></li>
          <li><a href="#!" target="_blank">Forum</a></li>
        </ul>
        </li>
      </ul>
    </nav>
  </div>
</div>
            
          
!
            
              $orange:                  #f53200;
$accent-color:            $orange;
$tt-nav-color:            #fff;
$tt-nav-background:       #111;
$tt-nav-toggle-text:"";
$tt-nav-open-toggle-text: " \00D7";
$screen-sm-max:              767px;
$screen-sm:                  768px;
$screen-lg:                  1200px;
%reset {
  margin: 0;
  padding: 0;
  list-style: none;
}
%hem {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

.navbar-default {
  @media (max-width: $screen-sm-max) {
    max-height: 80px;
  }
}

.navbar-header {
  @media (max-width: $screen-sm-max) {
    padding: 1em 0;
    max-height: 80px;
  }
}
.navbar-collapse[style] {
  height: 0 !important;
}
.navbar-collapse {
  font-size: 12px;

  @media (max-width: $screen-sm-max) {
    border: none;
  }

}
.navbar-collapse .navbar-nav {
  @extend %reset;

  @media (max-width: $screen-sm-max) {
    position: absolute;
    top: 0;
    right: 0;
    margin: 80px 0 0 0;
    padding: 0;
    overflow: hidden;
    min-width: 13em;
  }

  @media (min-width: $screen-sm) {
    float: right;
  }

}

/* NAV LIST ITEMS */
.navbar-nav .dropdown {

  @media (min-width: $screen-sm) {
    min-width: 7em;
    margin-left: 1px;
  }
}
.navbar-nav .dropdown:first-child,
.navbar-nav .dropdown:last-child {
  @media (min-width: $screen-sm) {
    min-width: 6.5em;
  }
}
.navbar-nav .dropdown:first-child {
  @media (min-width: $screen-sm) {
    margin-left: 0;
  }
}
.navbar-nav .dropdown:last-child {
  @media (min-width: $screen-sm) {
    margin-right: 0;
  }
}

/* NAV LINKS */

.dropdown-toggle {
  background-color: $tt-nav-background;
  text-transform: uppercase;
  @media (min-width: $screen-sm) {
    transition: background-color .25s;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    text-align: center;
 //   line-height: 4 !important;
    &:hover {
      background-color: $accent-color;
    }
  }
  @media (min-width: $screen-lg) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

.dropdown-menu > li > a {
  @extend %hem;
  padding-left: 1em !important;;
  padding-right: 1em !important;;
  line-height: 3 !important;
  transition: background-color .25s,color .5s .25s,border-color .75s 1s;

  @media (max-width: $screen-sm-max) {
    background-color: #333;
    padding-top: .5em;
    padding-bottom: .5em;
  }
  @media (min-width: $screen-sm) {
    color: transparent;
    background-color: transparent;
  }
}

.open .dropdown-menu a {
  @media (min-width: $screen-sm) {
    color: $tt-nav-color;
  }
  border-top-color: rgba(white,.1);
  border-bottom-color: rgba(black,.95);
}


/* TOGGLE BUTTON */
.navbar-default .navbar-toggle {
  background-color: #444;
  width: 22px;
  height: 100%;
  width: 3em;
  height: 2.5em;
  position: relative;

  &:before,
  &:after {
    position: absolute;
    display: inline-block;
    top:0;right:0;bottom:0;left:0;
    line-height: 1;
    z-index: 1;
  }
  &:before {
    content: " \00D7";
    border: none;
    box-shadow: none;
    font-size: 32px;
    color: $accent-color;
  }
  &:after {
    content: "Menu";
    position: absolute;
    margin-top: -18px;
    color: #000;
  }

}

.navbar-default .collapsed {
  &:before {
    content: $tt-nav-toggle-text;
    border-top: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    box-shadow: 0 4px 0 0 #444,0 6px 0 0 #ccc;
    margin: 10px 8px 15px;
  }
  &:hover,
  &:focus {
    border-color: #777;
    &:before {
      border-top: 2px solid #aaa;
      border-bottom: 2px solid #aaa;
      box-shadow: 0 4px 0 0 #ddd,0 6px 0 0 #aaa;
    }
  }
}

/* Submenu */
.navbar-nav .dropdown-menu {
  display: block;
  margin: 0;
  padding: 0;
  height: 0;
  overflow: hidden;
  list-style: none;
  text-transform: uppercase;
  transition: padding-bottom .75s cubic-bezier(0.6, 0.4, 0.25, 0.75),background-color 2s;

  @media (max-width: $screen-sm-max) {
    display: block;
    font-size: 11px;
    position: static;
    left: auto;
    margin: 0;
  }
  @media (min-width: $screen-sm) {
    left: -9999px;
    display: block;
    font-size: 12px;
    min-width: 176px;
    background-color: rgba(black,.5);
    margin-top: -1px !important;
  }
}
.dropdown:last-of-type .dropdown-menu {
  @media (min-width: $screen-sm) {
    margin-left: -85%;
  }
}

.open .dropdown-menu {

  @media (min-width: $screen-sm) {
    left: 0; right: 0;
    background-color: rgba(#333,.96);
  }
}

.navbar-collapse .caret {
  @media (min-width: $screen-sm) {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
 //   top: -1em;
  }
}

$item-count-list: 1 2 3 4 5 6 7 8 9 10;
$item-value-list: 44px 88px 132px 176px 220px 264px 308px 352px 396px 440px;
@for $i from 1 through length($item-count-list) {
  .open[class*="itemcount-#{$i}"] .dropdown-menu {
    padding-bottom: nth($item-value-list, $i);
  }
}
// general

h1 {
  text-transform: none;
  color: #000000;
  font-family: "Noto Serif", "Lucida Bright", Georgia, serif;
  // font-weight: 300;
  font-weight: 400;
  letter-spacing: -1px;
  word-spacing: 1px;
  line-height: 1;
  margin: -.125em 0 0 0;
}
html {
  font-size: 16px;
}
body {
  font: 14px/1.375 "Noto Sans", "Lucida Grande", "Lucida Unicode", "Calibri", sans-serif;
}
            
          
!
            
              /**
 * @preserve
 * Project: Bootstrap Hover Dropdown
 * Author: Cameron Spear
 * Version: v2.0.11
 * Contributors: Mattia Larentis
 * Dependencies: Bootstrap's Dropdown plugin, jQuery
 * Description: A simple plugin to enable Bootstrap dropdowns to active on hover and provide a nice user experience.
 * License: MIT
 * Homepage: http://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/
 */
;(function ($, window, undefined) {
    // outside the scope of the jQuery plugin to
    // keep track of all dropdowns
    var $allDropdowns = $();

    // if instantlyCloseOthers is true, then it will instantly
    // shut other nav items when a new one is hovered over
    $.fn.dropdownHover = function (options) {
        // don't do anything if touch is supported
        // (plugin causes some issues on mobile)
        // bram outcomment
        if('ontouchstart' in document) return this; // don't want to affect chaining

        // the element we really care about
        // is the dropdown-toggle's parent
        $allDropdowns = $allDropdowns.add(this.parent());

        return this.each(function () {
            var $this = $(this),
                $parent = $this.parent(),
                defaults = {
                    delay: 500,
                    instantlyCloseOthers: true
                },
                data = {
                    delay: $(this).data('delay'),
                    instantlyCloseOthers: $(this).data('close-others')
                },
                showEvent   = 'show.bs.dropdown',
                hideEvent   = 'hide.bs.dropdown',
                // shownEvent  = 'shown.bs.dropdown',
                // hiddenEvent = 'hidden.bs.dropdown',
                settings = $.extend(true, {}, defaults, options, data),
                timeout;

            $parent.hover(function (event) {
                // so a neighbor can't open the dropdown
                if(!$parent.hasClass('open') && !$this.is(event.target)) {
                    // stop this event, stop executing any code
                    // in this callback but continue to propagate
                    return true;
                }

                openDropdown(event);
            }, function () {
                timeout = window.setTimeout(function () {
                    $parent.removeClass('open');
                    $this.trigger(hideEvent);
                }, settings.delay);
            });

            // this helps with button groups!
            $this.hover(function (event) {
                // this helps prevent a double event from firing.
                // see https://github.com/CWSpear/bootstrap-hover-dropdown/issues/55
                if(!$parent.hasClass('open') && !$parent.is(event.target)) {
                    // stop this event, stop executing any code
                    // in this callback but continue to propagate
                    return true;
                }

                openDropdown(event);
            });

            // handle submenus
            $parent.find('.dropdown-submenu').each(function (){
                var $this = $(this);
                var subTimeout;
                $this.hover(function () {
                    window.clearTimeout(subTimeout);
                    $this.children('.dropdown-menu').show();
                    // always close submenu siblings instantly
                    $this.siblings().children('.dropdown-menu').hide();
                }, function () {
                    var $submenu = $this.children('.dropdown-menu');
                    subTimeout = window.setTimeout(function () {
                        $submenu.hide();
                    }, settings.delay);
                });
            });

            function openDropdown(event) {
                $allDropdowns.find(':focus').blur();

                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');

                window.clearTimeout(timeout);
                $parent.addClass('open');
                $this.trigger(showEvent);
            }
        });
    };

    $(document).ready(function () {
      // apply dropdownHover to all elements with the data-hover="dropdown" attribute
      $('[data-hover="dropdown"]').dropdownHover();


    });
})(jQuery, this); 
/* End Bootstrap Hover Dropdown jQuery plugin by Cameron Spear
 *
 *  Begin custom slidedown by Atelierbram **/
$(document).ready(function () {

var itms = {
    home    : ($("#tt-home li").length),
    blog    : ($("#tt-blog li").length),
    books   : ($("#tt-books li").length),
    goodies : ($("#tt-goodies li").length),
    media   : ($("#tt-media li").length),
    news    : ($("#tt-news li").length),
    contact : ($("#tt-contact li").length)
};

// add a class on the parent element with the appropriate value for the number of list-items
jQuery.each( itms, function( i, val ) {
  $( "#tt-" + i ).addClass('tt-nav__itemcount-'+val);
  });
  
  // make the top toggle-links clickable, [read more about this here](https://github.com/atelierbram/bootstrap-hover-dropdown)
  // effectively make create two dropdowns: this is for touch
  $('.dropdown').on({

    'hide.bs.dropdown': function(e) {

      $(this).on('click', function(e) {
        var self = $(this);
        $(this).toggleClass('is-clicked').siblings('.dropdown').removeClass('is-clicked');

        if('ontouchstart' in document && self.hasClass('open', 'is-clicked')) {
          e.stopPropagation();
        }
        else {
          return this;
        }
      });
    }

  });

  // effectively make create two dropdowns: this is for desktop - or to be precise: non-touch
  $('.dropdown').on({

    'show.bs.dropdown': function(e) {

      $(this).on('click', function(e) {

        if('ontouchstart' in document) {
          return this;
        }
        else {
          e.stopPropagation();
        }
      });
    }

  });

});
            
          
!
999px
Loading ..................

Console