Develop Reference

Vertical navigation scroll effect modification

I got this pen: https://codepen.io/janmez/pen/gryoKG but would like it to work more like on this site: https://rallyinteractive.com/. Not the background change, just list on the left. My js knowledge is not sufficient, can you help?
I tried achieving this with css but no success.
Edit: I added the full code and now what I want to achieve. I don't care about background animation, just wanted to make the nav and .content-section work more like on the site I mentioned above. Pen code does some of what I want: nav items get selected while scrolling to the relevant section. What I want to do is to have active nav elements always centered vertically and scroll together with sections. The example site (rallyinteractive.com) does exactly what I need.
$(document).ready(function(){
var contentSection = $('.content-section');
var navigation = $('nav');
//when a nav link is clicked, smooth scroll to the section
navigation.on('click', 'a', function(event){
event.preventDefault(); //prevents previous event
smoothScroll($(this.hash));
});
//update navigation on scroll...
$(window).on('scroll', function(){
updateNavigation();
})
//...and when the page starts
updateNavigation();
/////FUNCTIONS
function updateNavigation(){
contentSection.each(function(){
var sectionName = $(this).attr('id');
var navigationMatch = $('nav a[href="#' + sectionName + '"]');
if( ($(this).offset().top - $(window).height()/2 < $(window).scrollTop()) &&
($(this).offset().top + $(this).height() - $(window).height()/2 > $(window).scrollTop()))
{
navigationMatch.addClass('active-section');
}
else {
navigationMatch.removeClass('active-section');
}
});
}
function smoothScroll(target){
$('body,html').animate({
scrollTop: target.offset().top
}, 800);
}
});
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
#import url(https://fonts.googleapis.com/css?family=Lato);
html{
height: 100%;
font-family: 'Open Sans', sans-serif;
background-color: #E9E8E2;
}
body{
height: 100%;
}
nav{
width: 15%;
height: 400px;
position: fixed;
top: auto;
bottom: auto;
z-index: 10;
scroll-snap-type: y mandatory;
overflow-y: hidden;
}
ul{
list-style: none;
padding: 0;
text-align:center;
valign:center;
}
li{
padding: 40px 0;
scroll-snap-align: center;
}
span{
display: inline-block;
position:relative;
}
nav a{
display: inline-block;
color: #272727;
text-decoration: none;
font-size: 1em;
}
.circle{
height: 10px;
width: 10px;
left: -10px;
border-radius: 50%;
background-color: #272727;
}
.rect{
height: 3px;
width: 0px;
left: 0;
bottom: 4px;
background-color: #272727;
-webkit-transition: -webkit-transform 0.6s, width 1s;
-moz-transition: -webkit-transform 0.6s, width 1s;
transition: transform 0.6s, width 1s;
}
nav a:hover, nav .active-section{
color: #9b59b6;
}
nav a:hover span, nav .active-section span{
background-color: #9b59b6;
}
nav .active-section .rect{
width: 40px;
}
.content-section{
position: relative;
width: 80%;
height: 90%;
left: 50%;
background-color: #ecf1f1;
text-align: center;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.content-section h1{
position: relative;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
color:#9b59b6;
font-size: 3em;
}
/*CREDITS*/
.about{
position: fixed;
bottom:0;
left: 1%;
}
.about a{
text-decoration: none;
font-size: 1.5em;
}
.about a:visited, .about a:active, .about a:link{
color:#000;
}
.about a:hover{
color: red;
}
<nav>
<ul>
<li>
<a href="#section1">
<span class="rect"></span>
<span class="circle"></span>
ONE
</a>
</li>
<li>
<a href="#section2">
<span class="rect"></span>
<span class="circle"></span>
TWO
</a>
</li>
<li>
<a href="#section3">
<span class="rect"></span>
<span class="circle"></span>
THREE
</a>
</li>
<li>
<a href="#section4">
<span class="rect"></span>
<span class="circle"></span>
FOUR
</a>
</li>
<li>
<a href="#section5">
<span class="rect"></span>
<span class="circle"></span>
FIVE
</a>
</li>
</ul>
</nav>
<section id="section1" class="content-section">
<h1>SECTION ONE</h1>
</section>
<section id="section2" class="content-section">
<h1>SECTION TWO</h1>
</section>
<section id="section3" class="content-section">
<h1>SECTION THREE</h1>
</section>
<section id="section4" class="content-section">
<h1>SECTION FOUR</h1>
</section>
<section id="section5" class="content-section">
<h1>SECTION FIVE</h1>
</section>
<div class="about">♡</div>
</div>

Making an external file for my javascript code

I know this questions been asked multiple times, but I can't seem to find what I am doing wrong when I am referencing my javascript code. It works just fine when I put the code in the body. However, when I make the javascript code separate on its own it does not work. Any help would be very much apperciated. Thank you
(function( $ ) {
//Function to animate slider captions
function doAnimations( elems ) {
//Cache the animationend event in a variable
var animEndEv = 'webkitAnimationEnd animationend';
elems.each(function () {
var $this = $(this),
$animationType = $this.data('animation');
$this.addClass($animationType).one(animEndEv, function () {
$this.removeClass($animationType);
});
});
}
//Variables on page load
var $myCarousel = $('#carousel-example-generic'),
$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
//Initialize carousel
$myCarousel.carousel();
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
//Pause carousel
$myCarousel.carousel('pause');
//Other slides to be animated on carousel slide event
$myCarousel.on('slide.bs.carousel', function (e) {
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
$('#carousel-example-generic').carousel({
interval:3000,
pause: "false"
});
})(jQuery);
body {
margin: 0;
}
.nav {
border-width: 1px 0;
list-style: none;
background: linear-gradient(to top right, #0b0b0b, #494848);
overflow: hidden;
width: 100%;
height: 77px;
background-color: #000000;
margin-top: 0;
margin-bottom: -15px;
}
.nav li {
display: inline;
font-family: 'Allerta', Helvetica, Arial, sans-serif;
font-size: 14px;
text-transform: uppercase;
font-weight: 100 line-height: 1.7857;
letter-spacing: .075em;
float: right !important;
margin: 20px;
margin-right: 4%;
}
.nav a {
color: white;
text-decoration: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/*
Bootstrap Image Carousel Slider with Animate.css
Code snippet by Hashif (http://hashif.com) for Bootsnipp.com
Image credits: unsplash.com
*/
#import url(https://fonts.googleapis.com/css?family=Quicksand:400,700);
body {
font-family: 'Quicksand', sans-serif;
font-weight:700;
}
/********************************/
/* Main CSS */
/********************************/
#first-slider .main-container {
padding: 0;
}
#first-slider .slide1 h3, #first-slider .slide2 h3, #first-slider .slide3 h3, #first-slider .slide4 h3{
color: #fff;
font-size: 30px;
text-transform: uppercase;
font-weight:700;
}
#first-slider .slide1 h4,#first-slider .slide2 h4,#first-slider .slide3 h4,#first-slider .slide4 h4{
color: #fff;
font-size: 30px;
text-transform: uppercase;
font-weight:700;
}
#first-slider .slide1 .text-left ,#first-slider .slide3 .text-left{
padding-left: 40px;
}
#first-slider .carousel-indicators {
bottom: 0;
}
#first-slider .carousel-control.right,
#first-slider .carousel-control.left {
background-image: none;
}
#first-slider .carousel .item {
min-height: 425px;
height: 100%;
width:100%;
}
.carousel-inner .item .container {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
#first-slider h3{
animation-delay: 1s;
}
#first-slider h4 {
animation-delay: 2s;
}
#first-slider h2 {
animation-delay: 3s;
}
#first-slider .carousel-control {
width: 6%;
text-shadow: none;
}
#first-slider h1 {
text-align: center;
margin-bottom: 30px;
font-size: 30px;
font-weight: bold;
}
#first-slider .p {
padding-top: 125px;
text-align: center;
}
#first-slider .p a {
text-decoration: underline;
}
#first-slider .carousel-indicators li {
width: 14px;
height: 14px;
background-color: rgba(255,255,255,.4);
border:none;
}
#first-slider .carousel-indicators .active{
width: 16px;
height: 16px;
background-color: #fff;
border:none;
}
.carousel-fade .carousel-inner .item {
-webkit-transition-property: opacity;
transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
z-index: 2;
}
.carousel-control .fa-angle-right, .carousel-control .fa-angle-left {
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
}
.carousel-control .fa-angle-left{
left: 50%;
width: 38px;
height: 38px;
margin-top: -15px;
font-size: 30px;
color: #fff;
border: 3px solid #ffffff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 53px;
}
.carousel-control .fa-angle-right{
right: 50%;
width: 38px;
height: 38px;
margin-top: -15px;
font-size: 30px;
color: #fff;
border: 3px solid #ffffff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 53px;
}
.carousel-control {
opacity: 1;
filter: alpha(opacity=100);
}
/********************************/
/* Slides backgrounds */
/********************************/
#first-slider .slide1 {
background-image: url(http://s20.postimg.org/h50tgcuz1/image.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#first-slider .slide2 {
background-image: url(http://s20.postimg.org/uxf8bzlql/image.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#first-slider .slide3 {
background-image: url(http://s20.postimg.org/el56m97f1/image.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#first-slider .slide4 {
background-image: url(http://s20.postimg.org/66pjy66dp/image.jpg);
background-size: cover;
background-repeat: no-repeat;
}
/********************************/
/* Media Queries */
/********************************/
#media screen and (min-width: 980px){
}
#media screen and (max-width: 640px){
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Hayat Express</title>
<script src="js/jquery.js"></script>
<script src="js/1slider.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/animate.css/3.5.1/animate.min.css">
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Allerta" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
</head>
<body>
<ul class="nav">
<img src="logos/navbar-logo.png">
<li><a class="hover" href="#Contact">Contact</a></li>
<li><a class="active" href="#Careers">Careers</a></li>
<li><a class="active" href="#Services">Services</a></li>
<li><a class="active" href="#Drivers">Drivers</a></li>
</ul>
<div id="first-slider">
<div id="carousel-example-generic" class="carousel slide carousel-fade">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!-- Item 1 -->
<div class="item active slide1">
<div class="row"><div class="container">
<div class="col-md-3 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/pfmmo6qj1/window_domain.png">
</div>
<div class="col-md-9 text-left">
<h3 data-animation="animated bounceInDown">Add images, or even your logo!</h3>
<h4 data-animation="animated bounceInUp">Easily use stunning effects</h4>
</div>
</div></div>
</div>
<!-- Item 2 -->
<div class="item slide2">
<div class="row"><div class="container">
<div class="col-md-7 text-left">
<h3 data-animation="animated bounceInDown"> 50 animation options A beautiful</h3>
<h4 data-animation="animated bounceInUp">Create beautiful slideshows </h4>
</div>
<div class="col-md-5 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/sp11uneml/rack_server_unlock.png">
</div>
</div></div>
</div>
<!-- Item 3 -->
<div class="item slide3">
<div class="row"><div class="container">
<div class="col-md-7 text-left">
<h3 data-animation="animated bounceInDown">Simple Bootstrap Carousel</h3>
<h4 data-animation="animated bounceInUp">Bootstrap Image Carousel Slider with Animate.css</h4>
</div>
<div class="col-md-5 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/eq8xvxeq5/globe_network.png">
</div>
</div></div>
</div>
<!-- Item 4 -->
<div class="item slide4">
<div class="row"><div class="container">
<div class="col-md-7 text-left">
<h3 data-animation="animated bounceInDown">We are creative</h3>
<h4 data-animation="animated bounceInUp">Get start your next awesome project</h4>
</div>
<div class="col-md-5 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/9vf8xngel/internet_speed.png">
</div>
</div></div>
</div>
<!-- End Item 4 -->
</div>
<!-- End Wrapper for slides-->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<i class="fa fa-angle-left"></i><span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<i class="fa fa-angle-right"></i><span class="sr-only">Next</span>
</a>
</div>
</div>
<footer>
</footer>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Open Chrome Dev Tools and key in evaluate $ to see if jQuery is properly linked. If you receive jQuery information back, they you're in the clear.
You may also want to add your scripts like this:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/1slider.js"></script>
To denote as javascript. If that doesn't work, then verify the path to your JS file.

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following s near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.
try loading jquery right before the </body>
Bootstrap How to load JS

align button to extreme right in a nav bar

How do I move the "logout" to the extreme right of the tabs ?
I dont want to include it as list item and align the items ,with logout button to the extreme right of the nav bar.
Current scenario :
html involved with the nav bar and css of logout button:
#logout {
background:url('https://dh3vbjnk0bnfa.cloudfront.net/static/centralauth/images/btn-login-hover.png') no-repeat 5px 5px #484B4F;
width: 100px;
cursor:pointer;
border-radius:50px;
padding:10px 20px 10px 0;
color:White;
font-size:14px;
text-align:left;
text-indent:40px;
display:block;
margin:0 auto;
display: inline-block;
/* Animations: */
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-duration: .4s;
-webkit-transition-property: all;
-moz-transition-timing-function: ease-in-out;
-moz-transition-duration: .4s;
-moz-transition-property: all;
}
#logout:hover {
background-image: url( 'https://dh3vbjnk0bnfa.cloudfront.net/static/centralauth/images/btn-login.png' );
background-position: 65px 5px;
text-indent: 15px;
}
<nav class="main-nav-outer" id="test"><!--main-nav-start-->
<div class="container">
<ul class="main-nav">
<li>Bulletin Board</li>
<li>Leaderboard</li>
<!-- changed the name of tyhe services here -->
<li>Badges</li>
<li class="small-logo"><img src="img/small-logo.png" alt=""></li>
<li>Medals</li>
<li>Statistics</li>
<li>Contact</li>
</ul>
<a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
<a href="http://localhost:8666/web1/profile/mainpage/logout.php" id="logout" >Logout</a>
</div>
</nav><!--main-nav-end-->

Try to add #logout {float:right;}

It will work!
#logout{ float:right; }

You can do it with float: right; In #logout and that will send you right

Define the following rules in the CSS
.main-nav{
float:left;
}
#right {
float: right;
}
And adapt the HTML part as follow:
<div id="right">
<a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
<a href="http://localhost:8666/web1/profile/mainpage/logout.php" id="logout" >Logout</a>
</div>

#logout {
background:url('https://dh3vbjnk0bnfa.cloudfront.net/static/centralauth/images/btn-login-hover.png') no-repeat 5px 5px #484B4F;
width: 100px;
cursor:pointer;
border-radius:50px;
padding:10px 20px 10px 0;
color:White;
font-size:14px;
text-align:left;
text-indent:40px;
/*display:block; */
margin:0 auto;
display: inline-block;
/* add This Code */
position: absolute;
right:0;
top: 0;
/* Animations: */
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-duration: .4s;
-webkit-transition-property: all;
-moz-transition-timing-function: ease-in-out;
-moz-transition-duration: .4s;
-moz-transition-property: all;
}
#logout:hover {
background-image: url( 'https://dh3vbjnk0bnfa.cloudfront.net/static/centralauth/images/btn-login.png' );
background-position: 65px 5px;
text-indent: 15px;
}
<nav class="main-nav-outer" id="test"><!--main-nav-start-->
<div class="container">
<ul class="main-nav">
<li>Bulletin Board</li>
<li>Leaderboard</li>
<!-- changed the name of tyhe services here -->
<li>Badges</li>
<li class="small-logo"><img src="img/small-logo.png" alt=""></li>
<li>Medals</li>
<li>Statistics</li>
<li>Contact</li>
</ul>
<a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
<a href="http://localhost:8666/web1/profile/mainpage/logout.php" id="logout" >Logout</a>
</div>
</nav><!--main-nav-end-->

navbar top fixed shrink with a carousel without overlap

I want to get this effect: www.kemtecnia.com
This website has a navbar fixed top which shrinks on scroll down, has below a carousel fixed which seems to disappear by the content below.
How can I do in my code to get it?
I have the navbar top:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Desplegar menú</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="logo" href="index.php">
<img src="img/logo.gif" class="img-responsive" alt="DIESIA Networking Academic Program - UHU" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<?php
$i = 0;
foreach($menuItems as $menuItem => $url){
if($i == 0 && (basename($_SERVER['PHP_SELF']) == 'index.php') || (basename($_SERVER['PHP_SELF']) == ''))
echo "<li class='active'>\n";
else
echo "<li>\n";
echo $url . $menuItem . "</a>\n";
echo "</li>\n";
$i++;
}
?>
</ul>
</div>
</div>
but seems to overlap my carousel. The navbar shrinks too by js. I want to get that doesn't overlap my carousel and carousel dissapear with the rest of the content when scroll.
CSS of the navbar:
#media(min-width:768px) {
.navbar-fixed-top {
padding: 25px 0;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-fixed-top .navbar-brand {
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.navbar-fixed-top.navbar-shrink {
padding: 10px 0;
}
.navbar-fixed-top.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
}
.navbar a:focus {
outline: 0;
}
.navbar .navbar-nav {
letter-spacing: 1px;
}
.navbar .navbar-nav li a:focus {
outline: 0;
}
.navbar-default,
.navbar-inverse {
border: 0;
}
Thanks so much in advance!
Edit:
Codepen here: http://codepen.io/jesfer/pen/oLvQYY

don't know if this helps... but might be what you are looking for or atleast push you in the right direction.
http://codepen.io/MatthewBryce/pen/qZBPpp
HTML
<div class="headerWrap">
<div class="headerWrapContent">
Title
</div>
</div>
<div class="menuWrap">
<div class="menuNavigationFloat">
Home
Link 1
Link 2
Link 3
Link 4
</div>
</div>
<div class="headerMast">
This is a Header
</div>
<div class="contentWrap">
<h1>Page Content Bit</h1>
<p>A really simple sticky menu bar</p>
<p>Lorem ipsum dolor sit amet,</p>
</div>
</div><div class="wrap">
<div class="headerWrap">
<div class="headerWrapContent">
Stupidly simple stick-on-scroll Menu
</div>
</div>
<div class="menuWrap">
<div class="menuNavigationFloat">
Home
Link 1
Link 2
</div>
</div>
<div class="headerMast">
This is a Header
</div>
<div class="contentWrap">
<h1>Page Content Bit</h1>
<p>A really simple sticky menu bar</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
CSS
body {
color: #444;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
margin: 0px;
background: #222;
}
.headerMast {
background: #AAA;
min-height: 200px;
max-height: 200px;
margin-top: 0px;
text-align: center;
padding-top: 110px;
color: #FFF;
-webkit-transition: 1s; /* Safari */
transition: 1s;
}
.headerMastAnim {
margin-top: -300px;
margin-bottom: 300px;
-webkit-transition: 1s; /* Safari */
transition: 1s;
}
.wrap {
background: #444;
overflow: auto;
}
.headerWrap {
background: #222;
font-size: 30px;
height: 100px;
line-height: 100px;
font-weight: lighter;
color: #CCC;
}
.headerWrapContent {
width: 80%;
margin-left: auto;
margin-right: auto;
}
.menuWrap {
background: RGBA(0,0,0,0.7);
color: #fff;
height: 55px;
line-height: 60px;
letter-spacing: 1px;
width: 100%;
margin-bottom: -55px;
-webkit-transition: 0.4s; /* Safari */
transition: 0.4s;
z-index: 100;
position: absolute;
}
.menuWrap.sticky {
position: fixed;
top: 0px;
height: 30px;
line-height: 30px;
-webkit-transition: 0.4s; /* Safari */
transition: 0.4s;
}
.menuNavigationFloat {
background: RGBA(0,0,0,0.5);
padding: 0px 20px;
width: 80%;
height: inherit;
margin-left: auto;
margin-right: auto;
text-align: center;
overflow: hidden;
}
.menuNavigationFloat a{
list-style: none;
color: #FFF;
font-size: 16px;
width: 170px;
height: auto;
margin-left: 0px;
margin-right: 0px;
padding-bottom: 2px;
display: inline-block;
text-align: center;
text-transform: capitalize;
text-decoration: none;
transition: background 0.4s, width 0.3s;
}
.menuNavigationFloat a:hover{
text-decoration: none;
width: 200px;
transition: background 0.4, width 0.3s;
}
.menuNavigationFloat a:nth-child(1) { background: #CC2222; }
.menuNavigationFloat a:nth-child(1):hover { background: #FF3333; }
.contentWrap {
background: #EEE;
width: 80%;
padding: 20px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
margin-bottom: 80px;
min-height: 1000px;
}
JS
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.menuWrap').addClass("sticky");
$('.headerMast').addClass("headerMastAnim");
}
else{
$('.menuWrap').removeClass("sticky");
$('.headerMast').removeClass("headerMastAnim");
}
});
http://codepen.io/MatthewBryce/pen/qZBPpp

CSS3 Slideshow Issue

Hey there I took inspiration from this article for my slideshow. I worked with the source code from the website to make it my own and when I copy/pasted the html & css over to my project html & css files it doesn't seem to load.
I went over my code again and again but still haven't managed to solve the problem. It's working perfectly in the seperate html file but just not in my project file.
I would appreciate any help to solve this issue I'm having.
Screenshots:
Working in seperate file:
http://gyazo.com/712175106aeeb7b636b19937cf2c09c8
Project File where it doesn't appear to load or display:
http://gyazo.com/cc41a9cd0636c71dac6bb71edc4eff1a
Code for my project verision:
HTML
<!DOCTYPE html>
The Dark Lanes
<!-- Page Styling -->
<link href="css/Index.css" rel="stylesheet" type="text/css" />
<!-- Navigation -->
<link href="css/nav.css" rel="stylesheet" type="text/css" />
<!-- Slideshow -->
<link href="css/Slider.css" rel="stylesheet" type="text/css" />
<!-- jmpress plugin -->
<script type="text/javascript" src="JavaScript/jmpress.min.js"></script>
<!-- jmslideshow plugin : extends the jmpress plugin -->
<script type="text/javascript" src="JavaScript/jmslideshow.js"></script>
<script type="text/javascript" src="JavaScript/autoplay.js"></script>
<!-- JQuery Plugin -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="JavaScript/modernizr.js"></script>
<!-- Twitter Plugin -->
<script type="text/javascript" src="JavaScript/Twitter.js"></script>
<!-- Including the Lobster font from Google's Font Directory -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'>
<!-- Enabling HTML5 support for Internet Explorer -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<body>
<div id="wrapper">
<!--<header>
<img src="Images/DarkLanes-Logo.png" alt="header"/>
</header> -->
<!-- Navigation -->
<ul id="menu">
<li>Home</li>
<li>News</li>
<li>Gigs</li>
<li>Music</li>
<li>
Biography
<ul>
<li>Band Profile</li>
<li>Member Profiles</li>
</ul>
</li>
`<li>
Media
<ul>
<li>Images</li>
<li>Videos</li>
</ul>
</li>
<li>Contact</li>
</ul>
<!-- End of Nav -->
<div class="left">
<h3>The Dark Lanes</h3>
</div>
<div class="right"></div>
<!-- Start of Slideshow -->
<section id="jms-slideshow" class="jms-slideshow">
<div class="step" data-color="color-2">
<div class="jms-content">
<h3>Just when I thought...</h3>
<p>From fairest creatures we desire increase, that thereby beauty's rose might never die</p>
<a class="jms-link" href="#">Read more</a>
</div>
<img src="images/The Dark Lanes.jpg" alt="image1 />
</div>
<div class="step" data-color="color-3" data-y="900" data-rotate-x="80">
<div class="jms-content">
<h3>Holy cannoli!</h3>
<p>But as the riper should by time decease, his tender heir might bear his memory</p>
<a class="jms-link" href="#">Read more</a>
</div>
<img src="images/Stage.jpg" alt="image2" />
</div>
<div class="step" data-color="color-4" data-x="-100" data-z="1500" data-rotate="170">
<div class="jms-content">
<h3>The Rocker</h3>
<p>But as the riper should by time decease, his tender heir might bear his memory</p>
<a class="jms-link" href="videos.html">View Video!</a>
</div>
<img src="images/Darlanes.jpg" alt="image3" />
</div>
<div class="step" data-color="color-5" data-x="3000">
<div class="jms-content">
<h3>Supercool!</h3>
<p>Making a famine where abundance lies, thyself thy foe, to thy sweet self too cruel</p>
<a class="jms-link" href="#">Read more</a>
</div>
<img src="images/The Dark Lanes2.jpg" alt="image4" />
</div>
<div class="step" data-color="color-1" data-x="4500" data-z="1000" data-rotate-y="45">
<div class="jms-content">
<h3>Did you know that...</h3>
<p>Thou that art now the world's fresh ornament and only herald to the gaudy spring</p>
<a class="jms-link" href="#">Read more</a>
</div>
<img src="images/The Dark Lanes3.jpg" alt="image5" />
</div>
</section>
<div id="content">
<!-- Social Media Plugins -->
<div id="facebook">
<iframe src="https://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FTDLmusic%2Fposts%2F634412299948671&width=300&height=258&colorscheme=dark&show_faces=true&header=false&stream=false&show_border=false&appId=1407117389534500"
scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:245px; background-color:#373737;">
</iframe>
</div>
<div class="twitter-timeline">
<a class="twitter-timeline" href="https://twitter.com/TheDarkLanes" data-widget-id="422456331014901760">Tweets by #TheDarkLanes</a>
</div>
<!-- End of Social Media Plugins -->
<div class="video">
<iframe width="600" height="480" src="https://www.youtube.com/embed/hEkpJMxci2Y" frameborder="0">
</iframe>
</div>
<!--Social Media Logos -->
<div class="social-mediabg">
<h3>The Dark Lanes</h3>
</div>
<div class="social-media">
<ul>
<li><img src="Images/facebook.png" alt="facebook"/></li>
<li><img src="Images/twitter.png" alt="twitter"/></li>
<li><img src="Images/youtube.png" alt="youtube"/></li>
<li><img src="Images/soundcloud.png" alt="soundcloud"/></li>
</ul>
</div>
</div>
<div id="footer">
<div class="SiteMap">
<ul>
<li>Home</li>
<li>News</li>
<li>Gigs</li>
<li>Music</li>
<li>Band Profile</li>
<li>Member Profiles</li>
<li>Images</li>
<li>Videos</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="copyright">
<div class = "copyright">
<h5>© 2014 - The Dark Lanes. All Rights Reserved.</h5>
</div>
</div>
</div>
</body>
CSS
.jms-slideshow {
position: relative;
width: 100%;
height: 650px;
margin-top: 10px;
margin: 0 auto;
}
.jms-wrapper {
width: 995px;
height: 650px;
background-color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
border: 2px solid #fff;
border: 2px solid rgba(255, 255, 255, 0.9);
outline: none;
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 1s linear;
-o-transition: background-color 1s linear;
-ms-transition: background-color 1s linear;
transition: background-color 1s linear;
}
.color-1 {
background-color: #E3D8FF;
background-color: rgba(227, 216, 268, 1);
}
.color-2 {
background-color: #EBBBBC;
background-color: rgba(235, 187, 188, 1);
}
.color-3 {
background-color: #EED9C0;
background-color: rgba(238, 217, 192, 1);
}
.color-4 {
background-color: #DFEBB1;
background-color: rgba(223, 235, 177, 1);
}
.color-5{
background-color: #C1E6E5;
background-color: rgba(193, 230, 229, 1);
}
.step {
width: 995px;
height: 650px;
display: block;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.jms-content{
margin: 0px 0px 300px 20px;
position: relative;
clear: both;
}
.step:not(.active) {
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
}
.step h3{
color: grey;
font-size: 52px;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
margin: 0;
padding: 60px 0 10px 0;
}
.step p {
color: grey;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
font-size: 34px;
font-weight: normal;
position: relative;
margin: 0;
}
a.jms-link{
color: #fff;
text-transform: uppercase;
background: #969696; /* Old browsers */
background: -moz-linear-gradient(top, #969696 0%, #727272 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#969696), color-stop(100%,#727272)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #969696 0%,#727272 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #969696 0%,#727272 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #969696 0%,#727272 100%); /* IE10+ */
background: linear-gradient(top, #969696 0%,#727272 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#969696', endColorstr='#727272',GradientType=0 ); /* IE6-9 */
padding: 8px 15px;
display: inline-block;
font-size: 16px;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
border: 1px solid #444;
border-radius: 4px;
opacity: 1;
margin-top: 40px;
clear: both;
-webkit-transition: all 0.4s ease-in-out 1s;
-moz-transition: all 0.4s ease-in-out 1s;
-ms-transition: all 0.4s ease-in-out 1s;
-o-transition: all 0.4s ease-in-out 1s;
transition: all 0.4s ease-in-out 1s;
}
.step:not(.active) a.jms-link{
opacity: 0;
margin-top: 80px;
}
.step img{
position: absolute;
right: 0px;
top: 0px;
}
.jms-dots{
width: 100%;
position: absolute;
text-align: center;
left: 0px;
bottom: 0px;
z-index: 2000;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.jms-dots span{
display: inline-block;
position: relative;
width: 12px;
height: 12px;
border-radius: 50%;
background: #777;
margin: 3px;
cursor: pointer;
box-shadow:
1px 1px 1px rgba(0,0,0,0.1) inset,
1px 1px 1px rgba(255,255,255,0.3);
}
.jms-dots span.jms-dots-current:after{
content: '';
width: 8px;
height: 8px;
position: absolute;
top: 2px;
left: 2px;
border-radius: 50%;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
}
.jms-arrows{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.jms-arrows span{
position: absolute;
top: 50%;
margin-top: -40px;
height: 80px;
width: 30px;
cursor: pointer;
z-index: 2000;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
.jms-arrows span.jms-arrows-prev{
background: #fff url(../images/arrow_left.png) no-repeat 50% 50%;
left: -10px;
}
.jms-arrows span.jms-arrows-next{
background: #fff url(../images/arrow_right.png) no-repeat 50% 50%;
right: -10px;
}
/* Not supported style */
.jms-wrapper.not-supported{
background-color: #E3D8FF;
background-color: rgba(227, 216, 268, 1);
}
.jms-wrapper.not-supported:after{
content: 'The slideshow functionality is not supported on your device.';
padding: 0px 0px 30px 0px;
text-align: center;
display: block;
}
.jms-wrapper.not-supported .step{
display: none;
position: relative;
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
margin: 20px auto;
}
.jms-wrapper.not-supported .step:first-of-type{
display: block;
}
.jms-wrapper.not-supported .step:not(.active) a.jms-link{
opacity: 1;
margin-top: 40px;
}

You should be loading the jQuery before the jmpress plugin :)
jmpress is a jQuery plugin, and therefore wont work if you haven't loaded it before!

<!DOCTYPE html>
<head>
<title>RosePam Solutions Ltd</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="style_ie.css" />
<![endif]-->
<!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery-2.1.3.min.js" type="text/javascript"></script>
<!-- load jQuery and the plugin -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/bjqs-1.3.min.js"></script>
<!-- jmpress plugin -->
<script type="text/javascript" src="js/jmpress.min.js"></script>
<!-- jmslideshow plugin : extends the jmpress plugin -->
<script type="text/javascript" src="js/jquery.jmslideshow.js"></script>
<script type="text/javascript" src="js/modernizr.custom.48780.js"></script>
<noscript>
<style>
.step {
width: 100%;
position: relative;
}
.step:not(.active) {
opacity: 1;
filter: alpha(opacity=99);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=99)";
}
.step:not(.active) a.jms-link{
opacity: 1;
margin-top: 40px;
}
</style>
</noscript>
</head>
<body class="body">
<div class="content">
<section id="jms-slideshow" class="jms-slideshow">
<div class="step" data-color="color-2">
<img src="images/The Dark Lanes.jpg" alt="image1 />
<div class="jms-content">
<h3><span>Just when I thought...</span></h3>
<p><span>From fairest creatures we desire increase, that thereby beauty's rose might never die</span></p>
<a class="jms-link" href="#">Read more</a>
</div>
</div>
<div class="step" data-color="color-3" data-y="900" data-rotate-x="80">
<img src="images/Stage.jpg" alt="image2" />
<div class="jms-content">
<h3><span>Holy cannoli!</span></h3>
<p><span>But as the riper should by time decease, his tender heir might bear his memory</span></p>
<a class="jms-link" href="#">Read more</a>
</div>
</div>
<div class="step" data-color="color-4" data-x="-100" data-z="1500" data-rotate="170">
<img src="images/Darlanes.jpg" alt="image3" />
<div class="jms-content">
<h3><span>Supercool!<span></h3>
<p><span>Making a famine where abundance lies, thyself thy foe, to thy sweet self too cruel</span></p>
<a class="jms-link" href="#">Read more</a>
</div>
</div>
<div class="step" data-color="color-5" data-x="3000">
<img src="images/The Dark Lanes3.jpg" alt="image5" />
<div class="jms-content">
<h3><span>Did you know that...</span></h3>
<p><span>Thou that art now the world's fresh ornament and only herald to the gaudy spring</span></p>
<a class="jms-link" href="#">Read more</a>
</div>
</div>
</section>
<script type="text/javascript">
$(function() {
var jmpressOpts = {
animation : { transitionDuration : '0.8s' }
};
$( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, {
autoplay : true,
bgColorSpeed: '0.8s',
arrows : false
}));
});
</script>
</div>
</body>