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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Sticky Animated Header</title>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    
    <!-- HEADER -->
    <header>
        <div class="wrap-container clearfix">
            <div class="branding">
                <img src="https://gdriv.es/teamonkey/logo-lgx-01.png" class="logo-lg" alt="logo" title="logo"/>
                <img src="https://gdriv.es/teamonkey/logo-smx-01.png" class="logo-sm"  alt="logo" title="logo" />
            </div>
            <!-- menu div -->
            <div class="menu">
                <!--  this is the mobile menu button -->
                <a href="#" id="mobileButton" class="mobileMenuButton"><span></span></a>      
                <!--  this is the menu -->
                <ul class="listMenu">
                    <li><a href="#">Option 1</a></li>
                    <li><a href="#">Option 2</a></li>
                    <li><a href="#">Option 3</a></li>
                    <li><a href="#">Login</a></li>
                </ul>
            </div>
        </div>       
    </header>
    <div class="mobileMenu slideOut">
        <h2>Menu</h2>
        <!-- 05. obtain menu links from .listMenu and copy them to the here (Traversing the DOM) See js section 05-->
    </div>    
    
    <div class="content">
        <div class="stripe">
            <div class="wrap-container clearfix">
                <h1 class="text-center">Sticky Animated Header
                <br/>with Mobile Menu<br/><span>( resize to see the mobile menu )</span> </h1>
            </div>        
        </div>
        <div class="stripe">
            <div class="wrap-container clearfix">
                <h1 class="text-center">Just scroll me
                <br/><span>( a little more! )</span> </h1>
            </div>        
        </div>
        <div class="stripe">
            <div class="wrap-container clearfix">
                <h1 class="text-center">Ok! well done
                <br/><span>( now resize me to a width less than 768px )</span></h1>
            </div>        
        </div>        
    </div>
      
    

    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  </body>
</html>
              
            
!

CSS

              
                /* SOme Notes:
- works better with svg logos (I use png here).
- you can add some swipe for the mobile user using this nice plugin:
https://joanclaret.github.io/slide-and-swipe-menu/
*/
/* 
==================================================
- Settings for universal selector 
==================================================
*/
*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}

/* 
==================================================
- main body
==================================================
*/
html {
  min-height: 100%;
}

body {
    background-color:  #e0e0d1;
    /* height just for the demo to scroll*/
    min-height: 100%;
    position:relative;
}

.text-center {
    text-align: center;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* 
==================================================
- h , p
==================================================
*/
/* Just for the example */
h1 {
    font-family: sans-serif;
    color: #660066;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 1.5em;
}


h1 span {
    font-weight: normal;
    font-size: 0.5em;
}


p {
    font-size: 1px;
}


/* 
==================================================
- Header 
==================================================
*/
header{
    position: fixed;
    top: 0px;
    padding: 20px 0;
    width: 100%;
    height: 130px;
    color: #fff;
    background-color: transparent;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    z-index:1000;
}

header.stick {
    height: 50px;
    text-align: left;
    padding: 10px 0 !Important;
    transition: all 0.4s ease-in-out;   
    -webkit-transition: all 0.4s ease-in-out;
    background: rgba(255,255,255,.8);
}

    .wrap-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .branding {
        width: 25%;
        float: left;
        text-align: left;
        height: 90px;
        transition: all 0.4s ease-in-out;
        -webkit-transition: all 0.4s ease-in-out;    
    }
    
    .branding.stick {
        height: 30px;
        transition: all 0.4s ease-in-out;
        -webkit-transition: all 0.4s ease-in-out;    
    }

        .logo-lg {
            max-width: 150px;
            height: 100%;
        }

        .logo-sm {
            max-width: 150px;
            height: 100%;
            display: none;
        }

    .menu {
        width: 75%;
        float: left;
        text-align: right;
    }

    .listMenu { 
        display: none;
    }

/* just for the example, delete this */

.stripe {
    height: 400px;
    position: relative;
}

.stripe:first-child {
    height: 600px;
    position: relative;
}

.stripe:nth-child(even) {
    background: #ecc6d9;
}

/* 
==================================================
- The Mobile Menu
==================================================
*/

/* The Menu Button */
.mobileMenuButton {
    display: inline-block;
    position: relative;
    width: 30px;
    height: 34px;
    z-index: 1000;
    border-radius: 4px;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    
}

.mobileMenuButton:hover {
    border:1px solid #000;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
}

.mobileMenuButton:active {
    border:1px solid #000;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
}

.mobileMenuButton:hover span  {
    background: #fff;
}
.mobileMenuButton:hover span:before  {
    background: #fff;
}
.mobileMenuButton:hover span:after  {
    background: #fff;
}


.mobileMenuButton span {
    margin-top: 50%;
}
.mobileMenuButton span, .mobileMenuButton span:before, .mobileMenuButton span:after {
    cursor: pointer;
    border-radius: 5px;
    height: 4px;
    width: 22px;
    background: #262626;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    content: '';
}
.mobileMenuButton span:before {
    top: -8px;
}
.mobileMenuButton span:after {
    bottom: -8px; 
}



/* The Menu */
.mobileMenu { 
    width: 240px;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    background-color: #d6d6c2;
    z-index: 1200;
    text-align: right;
    padding-top: 100px ;
    transition: all .3s ease-in-out;
    
}

    .slideOut { 
        margin-right: -240px;
        transition: all .3s ease-in-out;
    }

    .slideIn { 
        margin-right: 0px;
    }

.mobileMenu h2 {
    font-family: sans-serif;
    color: #333333;
    font-size: 36px;
    padding-right: 30px;
    margin-bottom: 30px;
}

.mobileMenu ul {
    list-style: none;
}


.mobileMenu li { 
    border-bottom: 1px dotted black;
    padding: 0 30px;
}

.mobileMenu li a { 
    color: #333333;
    line-height: inherit;
    padding: 0;
    font-weight: 600;
    padding: 12px 0;
    font-size: 15px;
    text-decoration: none;
    font-family: sans-serif;
    display: block;
    /* CSS Transition */
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.mobileMenu li a:hover {
    color: #660066;
    text-decoration: none;
}


.overlay {
    background:rgba(0,0,0,0.7);
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    display:none;
    opacity: 0;
    position: fixed;
    transition: all .3s ease-in-out;
    z-index: 1150;    
}




/* 
==================================================
- Media Query Mobile First Aproach
==================================================
*/
@media (min-width:769px) {
    h1 {
        font-size: 2em;
    }

    .overlay {
        display: none !important;
    }
    
    .mobileMenu {
        display: none;
    }
    
    .wrap-container {
            width: 80%;
            margin: 0 auto;
    }
    
    .mobileMenuButton {
        display:none;
    }
    
    .listMenu { 
        display: inherit;
    }

    .listMenu li {
        display: inline;
        padding: 0px 15px;
    }
    

    .listMenu li a {
        color: #333333;
        line-height: inherit;
        padding: 0;
        font-weight: 600;
        font-size: 13px;
        text-decoration: none;
        font-family: sans-serif;
        display: inline-block;
        /* CSS Transition */
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }

    
    .listMenu li a:hover {
        color: #660066;
        text-decoration: none;
    }

    
    .listMenu li:last-child a{
        background: none;
        border: 2px solid #333333;
        border-radius: 3px;
        color: #333333;
        letter-spacing: -.001em;
        padding: 5px 20px;
        vertical-align: middle;
    }

    .listMenu li:last-child a:hover{
        background: #660066;
        border: 2px solid #660066;
        color: #fff;
        text-decoration: none;
    }
    
    .mobileButton {
        display: none;
    }
    
}

              
            
!

JS

              
                // var settings ****************************************************
var $header = $('header');
var $brand = $('.branding');
var $logoLG = $('.logo-lg');
var $logoSM = $('.logo-sm');
var $overlay = $('<div class="overlay"></div>');
var $menu = $('.mobileMenu');
var $ul = $('<ul></ul>');
// code setting  (mobile menu )*************************************


// 01. append overlay div (see overlay var) to body
$("body").append($overlay);

// 02. lock page scroll whe the mobile menu is active, Given a jQuery object that represents a set of DOM elements, the .add() method constructs a new jQuery object from the union of those elements and the ones passed into the method.
$overlay.add($menu).on('scroll touchmove mousewheel', function (event) {
    event.preventDefault();
});

// 03. on mobile button press, slide menu in and show overlay
$('#mobileButton').click(function(event){
  event.preventDefault();
  //Show the overlay and we add some opacity animation
  $overlay.show().animate({ opacity: 0.8, }, 200);
  //Togle class
  $menu.toggleClass( "slideOut" );      
});

// 04. on overlay click, close menu and hide overlay
$overlay.click(function(){
  //Hide the overlay and set opacity to 0
  $overlay.hide().animate({ opacity: 0, }, 200);
  //Togle class
  $menu.toggleClass( "slideOut" );  
});

// 05. obtain menu links from .listMenu and copy them to the mobile menu (Traversing the DOM)
$menu.append($ul);
$('.listMenu a').each( function () {
    var $anchor = $(this);
    var $li = $('<li></li>');
    $anchor.clone().appendTo($li);
    $ul.append($li);
});

// 06. we add the class stick to the fixed header to change his appearance and the apparence of their content on scroll
$(window).scroll(function() {
if ($(this).scrollTop() > 100){  
    $($header).addClass("stick");
    $($brand).addClass('stick')
    $($logoLG).hide();
    $($logoSM).show(); 
  }
  else {
    $($header).removeClass("stick");
    $($brand).removeClass('stick');  
    $($logoSM).hide();
    $($logoLG).show();
  }
});

              
            
!
999px

Console