LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


  
Tools

Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

CSS
body {
  transition: padding 0.2s ease;
}
@media (max-width: 992px) {
  body {
    padding-top: 3.5rem;
  }
}
@media (min-width: 992px) {
  body.expanded {
    padding-right: 160px;
  }
}
body.expanded .dock {
  transform: translateX(0);
}

.dock {
  transition: transform 0.2s ease;
  width: 160px;
  padding: 1rem;
  background-color: lightgray;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  transform: translateX(100%);
  z-index: 1050;
}
.dock i {
  font-size: 32px;
  width: 100%;
  text-align: right;
  padding-right: 1rem;
  cursor: pointer;
}
.dock i.expand-dock {
  position: absolute;
  right: 0;
  bottom: 1rem;
}
.dock .tools .fa {
  padding: 1rem;
}

.extra {
  font-size: 24px;
  line-height: 100%;
}

nav.fixed-top {
  position: relative;
}

@media (max-width: 992px) {
  nav {
    padding-right: 4.6em !important;
  }
  nav.fixed-top {
    position: fixed;
  }

  .extra {
    position: absolute;
    right: 0;
    top: 0.5rem;
  }
  .extra .navbar-nav {
    flex-direction: row;
  }
  .extra .navbar-nav .nav-link {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .extra .navbar-nav .nav-link:last-child {
    padding-right: 1rem;
  }
}
JS
$('.toggle-dock').on('click', function() {
  if($('body').hasClass('expanded')) {
    $('body').removeClass('expanded');
  }
  else {
    $('body').addClass('expanded');  
  }
});

$('.responsive').on('change',function(){
  $('#responsive-wrapper').removeClass().addClass($(this).val());
});
Term
Wed, 12/27/2017 - 07:05

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv