A Pen by David Molinatto

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

Technologies

  • HTML
  • CSS
  • JavaScript
    <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="hero-image"></div>
<header>
  <i class="fa fa-home"></i>
  <i class="fa fa-warning"></i>
  <p style="font-weight:900";>This is the header for your asses!</p>
</header>


<div class="nav-container">

<nav class="main-site-nav clearfix">
	<ul>
    	<li><a class="first" href="#">Home</a></li>
        <li><a href="http://174.123.89.168/hrealty/?page_id=75">About Us</a></li>
        <li><a href="http://174.123.89.168/hrealty/?page_id=61">Services</a></li>
        <li><a href="http://174.123.89.168/hrealty/?page_id=67">Properties</a></li>
        <li><a class="last" href="http://174.123.89.168/hrealty/?page_id=77">Testimonials</a></li>
    </ul>
</nav>
</div>



/*Downloaded from https://www.codeseek.co/brambleBush/a-pen-by-david-molinatto-XbJWOq */
    p{
  font-size:3em;
}

header{
  width:100%;
  background: rgba(0,0,0,.1);
  padding: 20px;
  position:fixed;
  top:0;
  z-index:1000;
  
}
.fa.fa-home, .fa.fa-warning{
  color:#727272;
  float:left;
  margin-right:30px;
  font-size: 3em;
  transition: color, linear, .5s;
}

.fa.fa-home:hover, .fa.fa-warning:hover{
  color:red;
  cursor:pointer;
}

.clearfix:before, .clearfix:after {
  content: "";
  display: table; }

.clearfix:after {
  clear: both; }

body,p {
  padding:0;
  margin:0;
  text-align: center;
  font-family: Raleway;
}
header p{
  float: left;
  color:red;
}
body{
  height:10000px;
  background: linear-gradient(to bottom, azure, aquamarine);
}

.hero-image{
  margin-top:95px;
  width:100%;
  height:450px;
  background:url(http://dorkshelf.com/wordpress/wp-content/uploads//2015/02/101-dalmatians-51213fd0dc398-e1423593215116.jpg) center center;
  background-size: cover;
}
.nav-container{
  position:relative;
   background: linear-gradient(to bottom, rgba(200,12,45,.8), rgba(255,200,100,.3));
  width: 100%;
  height:200px;
}
.main-site-nav {
  top: calc(50% - (50px/2 - 5px));
  position: absolute;
  z-index: 25;
  width: 100%; 
 box-shadow: 0 0 10px rgba(200,125,10,.7);
  }
  .main-site-nav ul {
    width: 800px;
    margin: 0 auto;
    border-radius: 999px;

     
  }
  .main-site-nav ul li {
    display: block;
    float: left; }
  .main-site-nav ul li a {
    padding: 20px;
    text-decoration: none;
    color: #999999;
    text-transform: uppercase;
    text-align: center;
    background-color: #666;
    transition: background 0.2s linear 0s, color 0.8s linear 0s;
    font-size: 22px;
    border-right: rgba(255,255,255,.3) 2px solid; }
   .main-site-nav ul li a:hover {
    background-color: #79232e;
    color: #fff; }
   .main-site-nav ul li .active {
    background: #51181f;
    color: #fff; }

.main-site-nav ul li a.first {
  border-radius: 50px 0 0 50px;}

.main-site-nav ul li a.last{
  border-radius: 0 50px 50px 0;
  border-right:none;}

.sticky {
  position:fixed;
  top: 80px;
  width:100%;
  height:200px;
  
  background:rgba(255,255,255,.7);
}



/*Downloaded from https://www.codeseek.co/brambleBush/a-pen-by-david-molinatto-XbJWOq */
    var header = $("header");
var sitenav = $("nav.main-site-nav");
var sitenavul = $("nav.main-site-nav ul")
var disttogo = sitenav.offset().top - header.height();

$(window).scroll(function() {
if ($(this).scrollTop() > disttogo){  
    console.log("biggerized!");
    sitenav.addClass("sticky");
  	$("div.nav-container").addClass("sticky");
    $(header).css()
  }
  else{
    sitenav.removeClass("sticky");
    $("div.nav-container").removeClass("sticky");
  }
});


Comments