Navbar active scroll on footer

Navbar active scroll on footer - javascript

My one page layout is working perfectly except for one issue. The navbar links when clicked changes color according to where the user goes to or scrolls.
The problem is that when I click on the "Contact Us" link, the navbar scrolls to that position but the navbar link doesn't change color as pictured above. It works for every other section just not for the bottom because the area isn't big enough.
window.onload=function(){
// Cache selectors
var lastId,
topMenu = $("#top-menu"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href='#"+id+"']").parent().addClass("active");
}
});
}//]]>
#font-face {
font-family: 'Montserrat';
src: url('fonts/Montserrat-Regular.otf')
}
#font-face {
font-family: 'MontserratSlim';
src: url('fonts/Montserrat-ExtraLight.otf')
}
body {
font-family: Helvetica, Arial;
margin: 0px;
}
#header {
top: 0px;
}
.signsize {
width: 140px;
height: 90px;
}
.movesimg {
float: right;
}
.packing {
float: left;
}
h1 {
font-family: 'Montserrat';
font-size: 50px;
text-align: right;
color: #3d3d3d;
margin:0;
}
h2 {
margin: 0;
color: #3d3d3d;
}
h3 {
color: #3d3d3d;
}
h4 {
font-family: 'Montserrat';
font-size: 50px;
text-align: left;
color: #3d3d3d;
margin:0;
}
h5 {
font-size: 50px;
padding-top: 60px;
color: #3d3d3d;
margin: 0;
}
h6 {
font-family: 'MontserratSlim';
font-size: 15px;
text-align: left;
color: #929292;
margin:0;
}
#descriptionl {
font-family: 'MontserratSlim';
font-size: 15px;
color: #929292;
margin:0;
}
#descriptionr {
font-family: 'MontserratSlim';
font-size: 15px;
color: #929292;
text-align: right;
margin:0;
}
#movessec {
display: inline-block;
padding-top: 60px;
padding-bottom: 60px;
border-bottom: solid thin #d8d8d8;
}
#navbar {
position: fixed;
z-index: 1;
background: white;
right: 0px;
top: 0px;
width: 100%;
}
#logo {
float: left;
margin-left: 10%;
padding-top: 10px;
padding-bottom: 10px;
}
#top-menu {
z-index: 1;
float: right;
padding-right: 10%;
padding-top: 25px;
padding-bottom: 25px;
}
#top-menu li {
float: left;
list-style-type: none;
white-space: nowrap;
font-size: 15px;
font-family: Montserrat;
text-transform: uppercase;
font-weight: 600;
text-align: center;
letter-spacing: 1px;
}
#more {
padding-left: 50px;
}
#moreR {
padding-right: 50px;
}
#more li {
float: left;
list-style-type: none;
white-space: nowrap;
font-size: 15px;
font-family: Montserrat;
text-transform: uppercase;
font-weight: 600;
text-align: center;
letter-spacing: 1px;
padding: 8px;
outline: #4690d4 solid thin;
text-decoration: none;
}
#moreR li {
float: right;
list-style-type: none;
white-space: nowrap;
font-size: 15px;
font-family: Montserrat;
text-transform: uppercase;
font-weight: 600;
text-align: center;
letter-spacing: 1px;
padding: 8px;
outline: #4690d4 solid thin;
text-decoration: none;
}
#top-menu a {
display: inline;
width: 6em;
text-align: center;
padding: 15px;
-webkit-transition: .5s all ease-out;
-moz-transition: .5s all ease-out;
transition: .5s all ease-out;
color: #545454;
text-decoration: none;
letter-spacing: 1px;
}
#top-menu a:hover {
color: #575757;
}
#top-menu li.active a {
color: white;
position: relative;
background: #4690d4;
}
#home {
padding-left: 70px;
padding-top: 150px;
height: 800px;
background-image: url(img/movingboxes.jpg);
background-size: cover;
background-repeat: no-repeat;
font-family: Montserrat;
}
#services {
height: 1600px;
}
#servicesleft {
float: left;
height: 100%;
width: 12%;
}
#servicesmain {
float: left;
height: 100%;
width: 76%;
}
#servicesright {
float: left;
height: 100%;
width: 12%;
}
#moving {
height: 800px;
padding-top: 50px;
padding-left: 12%;
padding-right: 12%;
background-image: url('img/cardboardbright.jpg');
font-family: Montserrat;
}
#quote {
height: 800px;
background: grey;
}
#contact {
height: 325px;
}
#contactleft {
float: left;
height: 100%;
width: 12%;
background: white;
}
#contactmain {
float: left;
height: 100%;
width: 76%;
background: white;
}
#contactright {
float: left;
height: 100%;
width: 12%;
background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="header">
<div id="navbar">
<div id="logo">
<img src="logosmall.png">
</div>
<ul id="top-menu">
<li class="active">
Home
</li>
<li>
Services
</li>
<li>
Moving Tips
</li>
<li>
Get A Quote
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
<div id="home">
Content Here.
</div>
<div id="services">
<div id="servicesleft"></div>
<div id="servicesmain">
<div id="movessec">
Content Here.
</div>
<div id="movessec">
Content Here.
</div>
<div id="movessec">
Content Here.
</div>
</div>
<div id="servicesright"></div>
</div>
<div id="moving">Content here.</div>
<div id="quote">Quote form goes here.</div>
<div id="contact">
<div id="contactleft">Content Here</div>
<div id="contactmain">Content Here</div>
<div id="contactright">Content Here</div>
</div>
</body>

You could move the change of the active class to the click, here i have commented out the change that happens on scroll, moved it to the click event, and also added a line to get the id:
window.onload=function(){
// Cache selectors
var lastId,
topMenu = $("#top-menu"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
id = href.split('#')[1],
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
menuItems.parent().removeClass("active").end().filter("[href='#"+id+"']").parent().addClass("active");
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
//menuItems
// .parent().removeClass("active")
// .end().filter("[href='#"+id+"']").parent().addClass("active");
}
});
}//]]>
#font-face {
font-family: 'Montserrat';
src: url('fonts/Montserrat-Regular.otf')
}
#font-face {
font-family: 'MontserratSlim';
src: url('fonts/Montserrat-ExtraLight.otf')
}
body {
font-family: Helvetica, Arial;
margin: 0px;
}
#header {
top: 0px;
}
.signsize {
width: 140px;
height: 90px;
}
.movesimg {
float: right;
}
.packing {
float: left;
}
h1 {
font-family: 'Montserrat';
font-size: 50px;
text-align: right;
color: #3d3d3d;
margin:0;
}
h2 {
margin: 0;
color: #3d3d3d;
}
h3 {
color: #3d3d3d;
}
h4 {
font-family: 'Montserrat';
font-size: 50px;
text-align: left;
color: #3d3d3d;
margin:0;
}
h5 {
font-size: 50px;
padding-top: 60px;
color: #3d3d3d;
margin: 0;
}
h6 {
font-family: 'MontserratSlim';
font-size: 15px;
text-align: left;
color: #929292;
margin:0;
}
#descriptionl {
font-family: 'MontserratSlim';
font-size: 15px;
color: #929292;
margin:0;
}
#descriptionr {
font-family: 'MontserratSlim';
font-size: 15px;
color: #929292;
text-align: right;
margin:0;
}
#movessec {
display: inline-block;
padding-top: 60px;
padding-bottom: 60px;
border-bottom: solid thin #d8d8d8;
}
#navbar {
position: fixed;
z-index: 1;
background: white;
right: 0px;
top: 0px;
width: 100%;
}
#logo {
float: left;
margin-left: 10%;
padding-top: 10px;
padding-bottom: 10px;
}
#top-menu {
z-index: 1;
float: right;
padding-right: 10%;
padding-top: 25px;
padding-bottom: 25px;
}
#top-menu li {
float: left;
list-style-type: none;
white-space: nowrap;
font-size: 15px;
font-family: Montserrat;
text-transform: uppercase;
font-weight: 600;
text-align: center;
letter-spacing: 1px;
}
#more {
padding-left: 50px;
}
#moreR {
padding-right: 50px;
}
#more li {
float: left;
list-style-type: none;
white-space: nowrap;
font-size: 15px;
font-family: Montserrat;
text-transform: uppercase;
font-weight: 600;
text-align: center;
letter-spacing: 1px;
padding: 8px;
outline: #4690d4 solid thin;
text-decoration: none;
}
#moreR li {
float: right;
list-style-type: none;
white-space: nowrap;
font-size: 15px;
font-family: Montserrat;
text-transform: uppercase;
font-weight: 600;
text-align: center;
letter-spacing: 1px;
padding: 8px;
outline: #4690d4 solid thin;
text-decoration: none;
}
#top-menu a {
display: inline;
width: 6em;
text-align: center;
padding: 15px;
-webkit-transition: .5s all ease-out;
-moz-transition: .5s all ease-out;
transition: .5s all ease-out;
color: #545454;
text-decoration: none;
letter-spacing: 1px;
}
#top-menu a:hover {
color: #575757;
}
#top-menu li.active a {
color: white;
position: relative;
background: #4690d4;
}
#home {
padding-left: 70px;
padding-top: 150px;
height: 800px;
background-image: url(img/movingboxes.jpg);
background-size: cover;
background-repeat: no-repeat;
font-family: Montserrat;
}
#services {
height: 1600px;
}
#servicesleft {
float: left;
height: 100%;
width: 12%;
}
#servicesmain {
float: left;
height: 100%;
width: 76%;
}
#servicesright {
float: left;
height: 100%;
width: 12%;
}
#moving {
height: 800px;
padding-top: 50px;
padding-left: 12%;
padding-right: 12%;
background-image: url('img/cardboardbright.jpg');
font-family: Montserrat;
}
#quote {
height: 800px;
background: grey;
}
#contact {
height: 325px;
}
#contactleft {
float: left;
height: 100%;
width: 12%;
background: white;
}
#contactmain {
float: left;
height: 100%;
width: 76%;
background: white;
}
#contactright {
float: left;
height: 100%;
width: 12%;
background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="header">
<div id="navbar">
<div id="logo">
<img src="logosmall.png">
</div>
<ul id="top-menu">
<li class="active">
Home
</li>
<li>
Services
</li>
<li>
Moving Tips
</li>
<li>
Get A Quote
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
<div id="home">
Content Here.
</div>
<div id="services">
<div id="servicesleft"></div>
<div id="servicesmain">
<div id="movessec">
Content Here.
</div>
<div id="movessec">
Content Here.
</div>
<div id="movessec">
Content Here.
</div>
</div>
<div id="servicesright"></div>
</div>
<div id="moving">Content here.</div>
<div id="quote">Quote form goes here.</div>
<div id="contact">
<div id="contactleft">Content Here</div>
<div id="contactmain">Content Here</div>
<div id="contactright">Content Here</div>
</div>
</body>

By setting a min-height to 100vh you can make sure it is always at least the height of the user's screen.

Related

Moving a button in the navbar, best Practices?

I have shifted my CTA "subscribe" button in the navbar to the far right using margin. But I am wondering if there is a better way to write this code-wise?
Prior to using the margin, I couldn't get the button to move at all, it was originally located beside the other navbar link items.
I have attached the code I am using below.
* {
text-decoration: none;
}
body {
background-color: #f3f3f3;
}
header {
background-color: #fff;
width: 100%;
height: 100%;
display: block
}
.header-logo img {
height:150px;
margin-top: 10px;
float: left;
margin-right: 5px;
}
header nav ul {
display: block;
margin: 0 auto;
width: fit-content;
padding-top: 50px;
}
header nav ul li {
display: inline-flex;
float: left;
list-style: none;
padding: 0px 15px;
}
header nav ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
text-transform: uppercase;
}
.sub {
margin: 0px 1300px;
float: right;
height: auto;
position: relative;
z-index: 1000;
}
ul li a:hover {
color: firebrick;
}
#media only screen and (min-width: 1000px){
header .header-logo {
float: left;
padding: 15px 15px;
height: 0px;
max-width: 220px;
display: table;
}
header nav ul {
margin: 20px 0px 0px 20px;
float: left;
}
header nav ul li a {
line-height: 50px;
}
header .sub {
display: block;
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
text-transform: uppercase;
line-height: 40px;
border: 2px solid #111;
float: right;
margin-right: 40px;
margin-top: 5px;
padding: 0 20px;
}
}
/*INDEX*/
.index-banner {
margin: 0 auto;
width: 100%;
height:calc(100vh - 100px);
background-image: url('img/road_trip.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: table;
}
.index-banner h1 {
font-family:'Karma', serif;
font-size: 60px;
font-weight: 100;
line-height: 70px;
color: #fff;
text-align: center;
text-shadow: 2px 2px 8px #111;
}
.verticial-center {
margin: 0 auto;
display: table-cell;
vertical-align: middle;
}
.footer {
font-family:'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
margin: 0px 330px;
padding: 15px;;
}
.hero-section {
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
}
.hero-section {
font-family:'Karma', serif;
font-size: 40px;
color: #111;
text-align: center;
padding: 25px;
}
.hero-paragraph {
margin: 0 auto;
width: 1895px;
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
text-align: center;
padding: 25px;
}
#media only screen and (min-width: 1000px){
.wrapper {
width: 2000px;
margin:0 auto;
}
.index-banner {
height:500px;
}
.hero-paragraph {
width: 2000px;
margin:0 auto;
}
.hero-section {
width: 2000px;
margin:0 auto;
}
}
/* FOOTER*/
footer {
width: calc(100% - 80px);
padding: 40px 40px;
margin-top: 20px;
background-color: #111;
overflow: hidden;
}
footer ul {
width: fit-content;
float: left;
padding-left: 20px;
}
footer ul li {
display: block;
list-style: none;
}
footer ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 18px;
color: #fff;
line-height: 40px;
}
.footer-sm {
width: 50px;
float: right;
}
.footer-sm img {
width: 100%;
margin-bottom: 10px;
display: block;
}
#media only screen and (min-width: 1000px){
footer ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 18px;
color: #fff;
line-height: 40px;
}
}
</head>
<body>
<header>
<div class="header-logo">
<img src="img/Milestonehackers.jpg" alt="Milestonehackers logo">
</div>
<nav>
<ul>
<li>Home</li>
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
<div class="sub">
<li>Subscribe</li>
</div>
</ul>
</nav>
</header>
<main>
<section class="index-banner">
<div class="verticial-center">
<h1>Milestonehackers Podcast & Newsletter</h1>
</div>
</section>
<div class="wrapper">
<section class="hero-section">
<h2>What Can you Expect From our Podcast</h2>
<p class="hero-paragraph">A host (meee, Paolo) interviewing various types of entrepreneurs or founders both technical and non-technical. Each entrepreneur has their own unique story that resulted in learning or experiencing something that can benefit our audience who may want to go down the entrepreneurial path!</p>
</section>
</div>
</main>
<div class="wrapper">
<footer>
<ul>
<li>Home</li>
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div class="footer-sm">
<a href="https://twitter.com/Milestonehacker">
<img src="img/twitter.png" alt="twiiter icon">
<a href="https://open.spotify.com/show/2ZiIxv5Mr83seTtNsg3LD9">
<img src="img/spotify.png" alt="spotify icon">
<img src="img/rss.png" alt="rss icon">
</a>
</div>
<p class="footer">Copyright © 2019; All Rights Reserved</p>
</footer>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-database.js"></script>
<script src="app.js"></script>
</div>
</body>
</html>

You can achieve that by removing float from ul element and add display flex. Also, remove float and margin from .sub element. Then by adding margin-left: auto to .sub the element will move to the far right.
One more note: your hero-section and some other elements have a width of 2000px which is not ideal for many screens. You can add max-width: 100% so it fits the screen if it is bigger than the screen.
See this code:
* {
text-decoration: none;
}
body {
background-color: #f3f3f3;
}
header {
background-color: #fff;
width: 100%;
height: 100%;
display: block
}
.header-logo img {
height:150px;
margin-top: 10px;
float: left;
margin-right: 5px;
}
header nav ul {
display: block;
margin: 0 auto;
width: 100%;
padding-top: 50px;
padding: 0;
}
header nav ul li {
display: inline-flex;
float: left;
list-style: none;
padding: 0px 15px;
}
header nav ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
text-transform: uppercase;
}
.sub {
/* Add margin-left: auto */
margin-left: auto;
/* float: right;*/
height: auto;
position: relative;
z-index: 1000;
}
ul li a:hover {
color: firebrick;
}
#media only screen and (min-width: 1000px){
header .header-logo {
float: left;
padding: 15px 15px;
height: 0px;
max-width: 220px;
display: table;
}
header nav ul {
margin: 20px 0px 0px 20px;
float: left;
}
header nav ul li a {
line-height: 50px;
}
header .sub {
display: block;
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
text-transform: uppercase;
line-height: 40px;
border: 2px solid #111;
float: right;
margin-right: 40px;
margin-top: 5px;
padding: 0 20px;
}
}
/*INDEX*/
.index-banner {
margin: 0 auto;
width: 100%;
height:calc(100vh - 100px);
background-image: url('img/road_trip.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: table;
}
.index-banner h1 {
font-family:'Karma', serif;
font-size: 60px;
font-weight: 100;
line-height: 70px;
color: #fff;
text-align: center;
text-shadow: 2px 2px 8px #111;
}
.verticial-center {
margin: 0 auto;
display: table-cell;
vertical-align: middle;
}
.footer {
font-family:'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
margin: 0px 330px;
padding: 15px;;
}
.hero-section {
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
}
.hero-section {
font-family:'Karma', serif;
font-size: 40px;
color: #111;
text-align: center;
padding: 25px;
}
.hero-paragraph {
margin: 0 auto;
width: 1895px;
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
text-align: center;
padding: 25px;
}
#media only screen and (min-width: 1000px){
.wrapper {
width: 2000px;
margin:0 auto;
}
.index-banner {
height:500px;
}
.hero-paragraph {
width: 2000px;
margin:0 auto;
}
.hero-section {
width: 2000px;
margin:0 auto;
}
}
/* FOOTER*/
footer {
width: calc(100% - 80px);
padding: 40px 40px;
margin-top: 20px;
background-color: #111;
overflow: hidden;
}
footer ul {
width: fit-content;
float: left;
padding-left: 20px;
}
footer ul li {
display: block;
list-style: none;
}
footer ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 18px;
color: #fff;
line-height: 40px;
}
.footer-sm {
width: 50px;
float: right;
}
.footer-sm img {
width: 100%;
margin-bottom: 10px;
display: block;
}
#media only screen and (min-width: 1000px){
footer ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 18px;
color: #fff;
line-height: 40px;
}
}
<body>
<header>
<div class="header-logo">
<img src="img/Milestonehackers.jpg" alt="Milestonehackers logo">
</div>
<nav>
<ul>
<li>Home</li>
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
<div class="sub">
<li>Subscribe</li>
</div>
</ul>
</nav>
</header>
<main>
<section class="index-banner">
<div class="verticial-center">
<h1>Milestonehackers Podcast & Newsletter</h1>
</div>
</section>
<div class="wrapper">
<section class="hero-section">
<h2>What Can you Expect From our Podcast</h2>
<p class="hero-paragraph">A host (meee, Paolo) interviewing various types of entrepreneurs or founders both technical and non-technical. Each entrepreneur has their own unique story that resulted in learning or experiencing something that can benefit our audience who may want to go down the entrepreneurial path!</p>
</section>
</div>
</main>
<div class="wrapper">
<footer>
<ul>
<li>Home</li>
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div class="footer-sm">
<a href="https://twitter.com/Milestonehacker">
<img src="img/twitter.png" alt="twiiter icon">
<a href="https://open.spotify.com/show/2ZiIxv5Mr83seTtNsg3LD9">
<img src="img/spotify.png" alt="spotify icon">
<img src="img/rss.png" alt="rss icon">
</a>
</div>
<p class="footer">Copyright © 2019; All Rights Reserved</p>
</footer>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-database.js"></script>
<script src="app.js"></script>
</div>

dropdown is getting messed up in the menu header

I am working on making menu header for my webpage. Here is my jsfiddle.
In my menu header, my dropdown is not working properly on INSURANCE text. Once you click it, you will see what I meant. I am not able to figure out what's wrong. And I believe it is mainly happening because of height and overflow on .topnav but not sure what is the best way to fix it?
Here is my HTML and CSS:
#font-face {
font-family: AvantGarde Demi;
src: url(AvantGarde Demi.woff);
}
#font-face {
font-family: AvantGarde;
src: url(AvantGarde.woff);
}
#font-face {
font-family: ITC Avant Garde Gothic;
src: url(ITC Avant Garde Gothic.woff);
}
/******************For Top Nav****************************/
.topnav {
position: relative;
top: -890px;
background-color: rgba(0, 0, 0, 0.5);
height: 89px;
border-bottom: 3px solid #EF7440;
overflow: hidden;
}
.topnav ul>li {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
.topnav a {
text-decoration: none;
font-size: 17px;
color: white;
display: block;
}
/* dropdown menus hidden initially */
.topnav ul > li > ul {
display: none;
margin-top: 30px;
width: 200px;
padding: 0;
position: absolute;
background-color: #f76c38;
}
.topnav ul > li > ul > li {
float: left;
clear: left;
display: block;
text-align: left;
}
body {
border: 0;
margin: 0;
height: 100%;
min-height: 100%;
overflow-x: hidden;
}
.header {
position: relative;
height: 769px;
}
.header-background {
height: 769px;
width: 100%;
}
.orange-bar {
position: relative;
padding-left: 150px;
top: -430px;
left: -160px;
}
.header h1 {
padding-left: 110px;
color: white;
font-family: AvantGarde;
text-align: center;
font-size: 35px;
left: -420px;
letter-spacing: .24em;
position: relative;
top: -615px;
font-family: "AvantGarde";
text-transform: uppercase;
}
.header p {
padding-left: 290px;
text-align: center;
padding-right: 210px;
font-size: 22px;
letter-spacing: .12em;
font-family: "Adelle PE";
color: white;
position: relative;
top: -700px;
}
.header h2 {
font-family: "Adelle PE";
font-style: italic;
text-transform: uppercase;
top: -490px;
font-weight: normal;
font-size: 21px;
position: relative;
margin-left: 630px;
color: white;
letter-spacing: 0.24em;
}
.header a {
color: white;
text-decoration: none;
}
#worldofnorthman {
background-size: cover;
background-image: url("our_story.png");
/*width: 404px;*/
height: 768px !important;
}
.login {
display: inline;
padding-left: 15px;
letter-spacing: .25em;
color: white;
font-size: 11.433px;
font-family: AvantGarde;
}
.login a {
color: white;
text-decoration: none;
}
.login a:hover {
color: #fe5b1f;
text-decoration: none;
}
.container {
width: 100% !important;
}
li.insurance {
padding-top: 30px !important;
}
li.our-story {
padding-top: 30px !important;
}
li.login-signup {
padding-top: 30px !important;
}
li.get-covered {
margin-top: 15px;
padding-bottom: 10px !important;
padding-top: 10px !important;
}
li.our-story {
margin-right: 200px !important;
font-family: AvantGarde;
letter-spacing: .30em;
color: white;
}
li.login-signup {
font-style: italic;
font-size: 12px;
font-family: Adelle PE;
letter-spacing: .30em;
color: white;
}
li.get-covered {
border-color: #EF7440;
border-style: solid;
color: white;
letter-spacing: .30em;
font-family: Adelle PE;
}
li.get-covered:hover {
background-color: #EF7440;
}
li.insurance {
margin-right: 80px;
margin-left: 80px;
color: white;
font-family: AvantGarde;
letter-spacing: .30em;
}
<div class="header"> <img class="header-background" src="https://s30.postimg.org/3q4ox3s81/background-image-chrisdavenport.png">
<div class="orange-bar">
<img class="orange-bar-image" src="https://s9.postimg.org/sdrolfjan/orange-bar.png">
</div>
<div class="topnav">
<nav>
<ul>
<li class="home"><img src="https://s2.postimg.org/nhr4xxqcp/northman_wordmark_CMYK.png">
</li>
<li class="dropdown">
<b>INSURANCE</b> <i class="fa fa-angle-down" aria-hidden="true"></i>
<ul class="dropdown-content">
<li><i>INDIVIDUAL</i>
</li>
<li><i>CORPORATE</i>
</li>
</ul>
</li>
<li class="our-story">OUR STORY</li>
<li class="login-signup">Log In | Sign up</li>
<li class="get-covered">GET <strong style="font-style:italic">COVERED</strong>
</li>
</ul>
</nav>
</div>
<h1 class="text-inside-orange">INSURANCE FOR THE WILD</h1>
</div>
Any thoughts what I did wrong? Also I want to align everything in menu header in one line and my dropdown should start from the border of that orange line.

You used overflow hidden in navigation div which caused the problem. Here's the jsfiddle
.topnav {
position: relative;
top: -890px;
background-color: rgba(0, 0, 0, 0.5);
height: 89px;
border-bottom: 3px solid #EF7440;
/*overflow: hidden;*/
}

Scroll Nav in Wordpress not working

I want to create a 'scroll-nav' for my website. So I separated 2 Navs and added some jquery:
<nav class="main-nav clearfix">
<?php wp_nav_menu(array('theme_location' => 'main_nav')); ?>
</nav>
<nav id="scroll-nav" style="display:none">
<?php wp_nav_menu(array('theme_location' => 'main_nav')); ?>
</nav>
$(window).scroll(function() {
if ($(window).scrollTop() > 50 ){
$('#scroll-nav').css('display', 'block');
} else {
$('#scroll-nav').css('display', 'none');
};
});
But it´s not working. Do I have to do something different because of WordPress? It tested it in a normal html, it works fine there.

You are putting clearfix like ID when you have to do it in class attribute.
<nav id="scroll-nav" class="clearfix" style="display:none">
And put your
$(window).scroll(function() {
if ($(window).scrollTop() > 50 ){
$('#scroll-nav').css('display', 'block');
} else {
$('#scroll-nav').css('display', 'none');
};
});
into
$(document).ready(function(){
});

#import url(http://fonts.googleapis.com/css?family=Pacifico|Roboto:400,500);
nav {
background: #333;
overflow: auto;
padding: 60px;
position: relative;
z-index: 2;
}
ul {
text-align: center;
float: right;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration: none;
display: block;
padding: 5px 10px;
margin: 0 10px;
color: #eee;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-size: 14px;
line-height: 32px;
font-weight: bold;
transition: all 200ms linear;
}
nav a:hover,
nav#small a:hover {
color: #C18055;
background: #fff;
}
nav#small {
background: #fff;
padding: 20px 40px;
position: fixed;
box-sizing: border-box;
width: 100%;
top: 0;
z-index: 1;
box-shadow: 0px 2px 2px #fff;
}
nav#small h1,
nav#small a {
color: #333;
}
nav#small h1 {
font-size: 38px;
}
nav#small h1>a {
color: #C18055;
}
nav#small h1>a:hover {
color: #3ab4a6;
}
div#content {
height: 2200px;
background: url('https://s-media-cache-ak0.pinimg.com/originals/03/95/6f/03956fed74537b3d7b0858e9a814748d.jpg')repeat 0 0;
opacity: 0.9;
}
div#content h2 {
color: #fff;
font-weight: bold;
transform: rotate(-10deg);
line-height: 60px;
font-size: 48px;
text-transform: uppercase;
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
width: 10%;
bottom: 10%;
text-shadow: 2px 2px 2px #333;
font-family: 'Pacifico', cursive;
}
div#content h2:before {
display: inline-block;
background: url('http://www.menoftheras.com/wp-content/gallery/test/arrow.png')no-repeat 0 0;
background-size: cover;
width: 239px;
height: 200px;
content: "";
transform: rotate(-80deg);
margin-bottom: 40px;
}
#media (max-width: 700px) {
nav {
padding: 20px;
}
nav h1 {
display: block;
float: none;
text-align: center;
padding: 20px;
}
nav ul {
float: none;
padding: 20px;
}
div#content h2 {
width: 30%;
}
nav#small {
padding: 20px;
}
nav#small ul {
padding: 5px;
}
nav#small h1 {
padding: 10px;
font-size: 28px;
margin-bottom: 5px;
}
nav#small a {
font-weight: normal;
}
}
<header>
<nav>
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<nav id="small">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="content">
<h2>Scroll!</h2>
</div>
Would you please check my above snippet?

Why Does My slideToggle Have A Strange Jump Glitch?

I created a slideToggle menu that for some reason seems to jump around when it slides up and down. The border bottom of the sliding header just flies around and glitches when the menu slides up and down, but otherwise the slideToggle works fine.
I've tried setting the position of the .headermenu to relative as well as hiding the overflow, but neither of these seemed to have fixed the issue. Does slide toggle just not work properly with a border bottom or is the issue in my code?
The glitch is difficult to explain, but the glitch shows in my code snippet, so I suggest you view it to get an understanding of what's happening. Basically the border bottom is bouncing around when the menu slides down.
In order to activate the drop down header you have to click the little broken image in the corner, which will activate the menu (so you can see the glitch in action.)
Is it related to some sort of start height for the animation? Do I need the animation to start at a specific point in the page or is it something else entirely?
$(document).ready(function(){
$("button").click(function(){
$(".headermenu").slideToggle();
$(".headermenu").height('150')
});
});
* {
box-sizing: border-box;
}
#font-face {
font-family: 'monaco';
src: url('monaco-webfont.woff2') format('woff2'),
url('monaco-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
a {
font-family: 'monaco';
font-size: 16px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: blue;
}
body {
margin: 0px;
}
button {
background: none;
border: none;
float: right;
margin-right: 40px;
margin-top: 15px;
padding: 0px;
}
#hamburger {
padding-top: 2px;
width: 27px;
}
header {
background-color: blue;
border-bottom: solid white 1px;
color: white;
float: left;
height: 60px;
padding-top: 4px;
position: fixed;
width: 100%;
z-index: 150px;
}
.headermenu {
background-color: blue;
border-bottom: solid white 1px;
color: white;
display: none;
font-family: 'monaco';
height: 200px;
overflow: hidden;
padding-top: 40px;
position: relative;
width: 100%;
/*-webkit-transition: all .5s;
transition: all .5s;
height: 0;*/
}
.headermenu a {
color: white;
float: right;
padding-right: 40px;
text-decoration: none;
}
.headermenu a:hover {
text-decoration: underline;
}
.headermenu a:visited {
color: white;
}
#headermenuleft {
float: right;
line-height: 25px;
text-align: left;
}
#headermenuleft ul {
list-style-type: none;
}
#headermenuright {
float: right;
line-height: 25px;
text-align: left;
}
#headermenuright ul {
list-style-type: none;
}
<!DOCTYPE HTML>
<html>
<head>
<link href="css/main.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/main.js"></script>
<title>Why Have There Been No Great Women Artists?</title>
</head>
<body>
<header>
<button><img id="hamburger" src="images/Menu,_Web_Fundamentals_(White).svg.png"></button>
<a id="home" href="index.html">Why Have There Been No Great Women Artists?</a>
<div class="headermenu">
<div id="headermenuleft">
<ul>
<li>Georgia O'Keeffe</li>
<li>Frida Kahlo</li>
<li>Artemisia Gentileschi</li>
</ul>
</div>
<div id="headermenuright">
<ul>
<li>The Essay</li>
<li>Judy Chicago</li>
<li>Kara Walker</li>
<li>Ana Mendieta</li>
</ul>
</div>
</div>
</header>
</body>
</html>

$(document).ready(function () {
$("button").click(function () {
$(".headermenu").slideToggle('slow', function () {
$(this).height('150');
});
});
});
* {
box-sizing: border-box;
}
#font-face {
font-family: 'monaco';
src: url('monaco-webfont.woff2') format('woff2'),
url('monaco-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
a {
font-family: 'monaco';
font-size: 16px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: blue;
}
body {
margin: 0px;
}
button {
background: none;
border: none;
float: right;
margin-right: 40px;
margin-top: 15px;
padding: 0px;
}
#essay {
background-color: white;
height: 400px;
padding-top: 60px;
width: 100%;
}
#essaytext {
width: 830px;
margin: auto;
padding-top: 30px;
}
#gallery {
background-color: blue;
height: 1000px;
width: 100%;
}
#gallery a{
color: white;
}
#gallery h2 {
color: white;
font-size: 28px;
}
#gallerytext {
margin: auto;
padding-bottom: 50px;
padding-top: 50px;
width: 830px;
}
#grid {
margin: auto;
padding-top: 30px;
width: 830px;
}
#gridone {
background-color: white;
color: blue;
display: block;
float: left;
height: 200px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridtwo {
background-color: white;
color: blue;
display: block;
float: right;
height: 200px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridthree {
background-color: white;
color: blue;
display: block;
float: left;
height: 200px;
margin-top: 30px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridfour {
background-color: white;
color: blue;
display: block;
float: right;
height: 200px;
margin-top: 30px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridfive {
background-color: white;
color: blue;
display: block;
float: right;
height: 200px;
margin-top: 30px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridsix {
background-color: white;
color: blue;
display: block;
float: left;
height: 200px;
margin-top: 30px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#hamburger {
padding-top: 2px;
width: 27px;
}
header {
background-color: blue;
border-bottom: solid white 1px;
color: white;
float: left;
padding-top: 4px;
position: fixed;
width: 100%;
z-index: 150;
}
header > div:first-child
{
height: 60px;
}
.headermenu {
background-color: blue;
border-bottom: solid white 1px;
color: white;
display: none;
font-family: 'monaco';
height: 200px;
overflow: hidden;
padding-top: 40px;
position: relative;
width: 100%;
/*-webkit-transition: all .5s;
transition: all .5s;
height: 0;*/
}
.headermenu a {
color: white;
float: right;
padding-right: 40px;
text-decoration: none;
}
.headermenu a:hover {
text-decoration: underline;
}
.headermenu a:visited {
color: white;
}
#headermenuleft {
float: right;
line-height: 25px;
text-align: left;
}
#headermenuleft ul {
list-style-type: none;
}
#headermenuright {
float: right;
line-height: 25px;
text-align: left;
}
#headermenuright ul {
list-style-type: none;
}
#home {
color: white;
display: block;
font-family: 'monaco';
font-size: 16px;
padding-left: 40px;
padding-right: 0px;
padding-top: 17px;
margin: auto;
}
h2 {
color: blue;
font-family: 'monaco';
font-size: 28px;
font-weight: normal;
}
nav#mobile-nav {
display: none;
z-index: 100;
width: 100%;
}
p {
font-family: 'monaco';
font-size: 16px;
line-height: 21px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div>
<button><img id="hamburger" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Menu,_Web_Fundamentals.svg/2000px-Menu,_Web_Fundamentals.svg.png"></button>
<a id="home" href="index.html">Why Have There Been No Great Women Artists?</a>
</div>
<div class="headermenu">
<div id="headermenuleft">
<ul>
<li>Georgia O'Keeffe</li>
<li>Frida Kahlo</li>
<li>Artemisia Gentileschi</li>
</ul>
</div>
<div id="headermenuright">
<ul>
<li>The Essay</li>
<li>Judy Chicago</li>
<li>Kara Walker</li>
<li>Ana Mendieta</li>
</ul>
</div>
</div>
</header>
<div id="essay">
<div id="essaytext">
<h2>The Essay</h2>
<p>“Why Have There Been No Great Women Artists?” is an essay by Linda Nochlin that details how centuries of oppression and misogyny has led to a male dominated art world. Nochlin explains through her essay how sexism has prevented women from fully being recognized as historically significant artists.</p>
Read The Essay →
</div>
</div>
<div id="gallery">
<div id="gallerytext">
<h2>The Gallery</h2>
<p>This website is intended to shed a light on the many incredible women in art who have been overshadowed due to their gender. By viewing the gallery you can see the incredible works of women artists whose significant contributions to the art world have been cast aside because of their womanhood.</p>
<div id="grid">
<a href="./judy.html">
<div id="gridone">
"The Dinner Party"<br>
Judy Chicago
</div>
</a>
<a href="./kara.html">
<div id="gridtwo">
"A Subtlety"<br>
Kara Walker
</div>
</a>
<a href="./mendieta.html">
<div id="gridthree">
"Alma Silueta en Fuego"<br>
Ana Mendieta
</div>
</a>
<a href="./georgia.html">
<div id="gridfour">
"Black Iris"<br>
Georgia O'Keeffe
</div>
</a>
<a href="./frida.html">
<div id="gridfive">
"The Two Fridas"<br>
Frida Kahlo
</div>
</a>
<a href="./artemesia.html">
<div id="gridsix">
"Judith Slaying Holofernes"<br>
Artemisia Gentileschi
</div>
</a>
</div>
</div>
</div>

The problem is you have a white bottom border in .headermenu. If you remove that that fixes the problem.
There are other issues however, you are using pixels in the z-index, when that parameter only accepts a number.
Also, it doesn't look to me like you need $(".headermenu").height('150');. If you do, then it should be $(".headermenu").height(150); - without the quote around the number of pixels.
EDIT
It appears you need to add top: 6px; to .headermenu (at least to look correct to me in Firefox). I can't tell you why exactly, but it appears to be to do with the hamburger button being floated and not taking up enough vertical height (padding/margin).
$(document).ready(function(){
$("button").click(function(){
$(".headermenu").slideToggle();
});
});
* {
box-sizing: border-box;
}
#font-face {
font-family: 'monaco';
src: url('monaco-webfont.woff2') format('woff2'),
url('monaco-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
a {
font-family: 'monaco';
font-size: 16px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: blue;
}
body {
margin: 0px;
}
button {
background: none;
border: none;
float: right;
margin-right: 40px;
margin-top: 15px;
padding: 0px;
}
#essay {
background-color: white;
height: 400px;
padding-top: 60px;
width: 100%;
}
#essaytext {
width: 830px;
margin: auto;
padding-top: 30px;
}
#gallery {
background-color: blue;
height: 1000px;
width: 100%;
}
#gallery a{
color: white;
}
#gallery h2 {
color: white;
font-size: 28px;
}
#gallerytext {
margin: auto;
padding-bottom: 50px;
padding-top: 50px;
width: 830px;
}
#grid {
margin: auto;
padding-top: 30px;
width: 830px;
}
#gridone {
background-color: white;
color: blue;
display: block;
float: left;
height: 200px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridtwo {
background-color: white;
color: blue;
display: block;
float: right;
height: 200px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridthree {
background-color: white;
color: blue;
display: block;
float: left;
height: 200px;
margin-top: 30px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridfour {
background-color: white;
color: blue;
display: block;
float: right;
height: 200px;
margin-top: 30px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridfive {
background-color: white;
color: blue;
display: block;
float: right;
height: 200px;
margin-top: 30px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#gridsix {
background-color: white;
color: blue;
display: block;
float: left;
height: 200px;
margin-top: 30px;
padding-top: 20px;
padding-left: 25px;
width: 400px;
}
#hamburger {
padding-top: 2px;
width: 27px;
}
header {
background-color: blue;
border-bottom: solid red 1px;
color: white;
float: left;
height: 60px;
padding-top: 4px;
position: fixed;
width: 100%;
z-index: 150;
}
.headermenu {
background-color: green;
border-bottom: solid red 1px;
color: white;
display: none;
font-family: 'monaco';
height: 200px;
overflow: hidden;
padding-top: 60px;
position: relative;
width: 100%;
top: 6px;
/*-webkit-transition: all .5s;
transition: all .5s;
height: 0;*/
z-index: 200;
}
.headermenu a {
color: white;
float: right;
padding-right: 40px;
text-decoration: none;
}
.headermenu a:hover {
text-decoration: underline;
}
.headermenu a:visited {
color: white;
}
#headermenuleft {
float: right;
line-height: 25px;
text-align: left;
}
#headermenuleft ul {
list-style-type: none;
}
#headermenuright {
float: right;
line-height: 25px;
text-align: left;
}
#headermenuright ul {
list-style-type: none;
}
#home {
color: white;
display: block;
font-family: 'monaco';
font-size: 16px;
padding-left: 40px;
padding-right: 0px;
padding-top: 17px;
margin: auto;
}
h2 {
color: blue;
font-family: 'monaco';
font-size: 28px;
font-weight: normal;
}
nav#mobile-nav {
display: none;
z-index: 100;
width: 100%;
}
p {
font-family: 'monaco';
font-size: 16px;
line-height: 21px;
}
<!DOCTYPE HTML>
<html>
<head>
<link href="css/main.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/main.js"></script>
<title>Why Have There Been No Great Women Artists?</title>
</head>
<body>
<header>
<button><img id="hamburger" src="images/Menu,_Web_Fundamentals_(White).svg.png"></button>
<a id="home" href="index.html">Why Have There Been No Great Women Artists?</a>
<div class="headermenu">
<div id="headermenuleft">
<ul>
<li>Georgia O'Keeffe</li>
<li>Frida Kahlo</li>
<li>Artemisia Gentileschi</li>
</ul>
</div>
<div id="headermenuright">
<ul>
<li>The Essay</li>
<li>Judy Chicago</li>
<li>Kara Walker</li>
<li>Ana Mendieta</li>
</ul>
</div>
</div>
</header>
</body>
</html>

How to make link active on bottom scroll

I have a one page layout where I need to make my "Contact Us" section highlight active (ie. Highlight the navbar links background blue) as my other links do when clicked and are scrolled to.
I guess the easiest way to do this is make it active when the page is scrolled to the bottom. I've tried adding a few things to my javascript but it hasn't worked.
EDIT:
I'm almost there I have added this bit of code to my jQuery and added two class elements to my HTML a href, but now when I scroll up "Get A Quote" does't highlight/active until I scroll past it then back down. Any suggestions?
Changed HTML
<li class="quoteive">
Get A Quote
</li>
<li class="contactive">
Contact Us
</li>
Added Code
$(window).on("scroll", function() {
var scrollHeight = $(document).height();
var scrollPosition = $(window).height() + $(window).scrollTop();
if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
$(".contactive").addClass('active');
$(".quoteive").removeClass('active');
}
else {
$(".contactive").removeClass('active');
}
});
Here is my ORIGINAL code:
window.onload=function(){
// Cache selectors
var lastId,
topMenu = $("#top-menu"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href='#"+id+"']").parent().addClass("active");
}
});
}//]]>
#font-face {
font-family: 'Montserrat';
src: url('fonts/Montserrat-Regular.otf')
}
#font-face {
font-family: 'MontserratSlim';
src: url('fonts/Montserrat-ExtraLight.otf')
}
body {
font-family: Helvetica, Arial;
margin: 0px;
}
#header {
top: 0px;
}
.signsize {
width: 140px;
height: 90px;
}
.movesimg {
float: right;
}
.packing {
float: left;
}
h1 {
font-family: 'Montserrat';
font-size: 50px;
text-align: right;
color: #3d3d3d;
margin:0;
}
h2 {
margin: 0;
color: #3d3d3d;
}
h3 {
color: #3d3d3d;
}
h4 {
font-family: 'Montserrat';
font-size: 50px;
text-align: left;
color: #3d3d3d;
margin:0;
}
h5 {
font-size: 50px;
padding-top: 60px;
color: #3d3d3d;
margin: 0;
}
h6 {
font-family: 'MontserratSlim';
font-size: 15px;
text-align: left;
color: #929292;
margin:0;
}
#descriptionl {
font-family: 'MontserratSlim';
font-size: 15px;
color: #929292;
margin:0;
}
#descriptionr {
font-family: 'MontserratSlim';
font-size: 15px;
color: #929292;
text-align: right;
margin:0;
}
#movessec {
display: inline-block;
padding-top: 60px;
padding-bottom: 60px;
border-bottom: solid thin #d8d8d8;
}
#navbar {
position: fixed;
z-index: 1;
background: white;
right: 0px;
top: 0px;
width: 100%;
}
#logo {
float: left;
margin-left: 10%;
padding-top: 10px;
padding-bottom: 10px;
}
#top-menu {
z-index: 1;
float: right;
padding-right: 10%;
padding-top: 25px;
padding-bottom: 25px;
}
#top-menu li {
float: left;
list-style-type: none;
white-space: nowrap;
font-size: 15px;
font-family: Montserrat;
text-transform: uppercase;
font-weight: 600;
text-align: center;
letter-spacing: 1px;
}
#more {
padding-left: 50px;
}
#moreR {
padding-right: 50px;
}
#more li {
float: left;
list-style-type: none;
white-space: nowrap;
font-size: 15px;
font-family: Montserrat;
text-transform: uppercase;
font-weight: 600;
text-align: center;
letter-spacing: 1px;
padding: 8px;
outline: #4690d4 solid thin;
text-decoration: none;
}
#moreR li {
float: right;
list-style-type: none;
white-space: nowrap;
font-size: 15px;
font-family: Montserrat;
text-transform: uppercase;
font-weight: 600;
text-align: center;
letter-spacing: 1px;
padding: 8px;
outline: #4690d4 solid thin;
text-decoration: none;
}
#top-menu a {
display: inline;
width: 6em;
text-align: center;
padding: 15px;
-webkit-transition: .5s all ease-out;
-moz-transition: .5s all ease-out;
transition: .5s all ease-out;
color: #545454;
text-decoration: none;
letter-spacing: 1px;
}
#top-menu a:hover {
color: #575757;
}
#top-menu li.active a {
color: white;
position: relative;
background: #4690d4;
}
#home {
padding-left: 70px;
padding-top: 150px;
height: 800px;
background-image: url(img/movingboxes.jpg);
background-size: cover;
background-repeat: no-repeat;
font-family: Montserrat;
}
#services {
height: 1600px;
}
#servicesleft {
float: left;
height: 100%;
width: 12%;
}
#servicesmain {
float: left;
height: 100%;
width: 76%;
}
#servicesright {
float: left;
height: 100%;
width: 12%;
}
#moving {
height: 800px;
padding-top: 50px;
padding-left: 12%;
padding-right: 12%;
background-image: url('img/cardboardbright.jpg');
font-family: Montserrat;
}
#quote {
height: 800px;
background: grey;
}
#contact {
height: 325px;
}
#contactleft {
float: left;
height: 100%;
width: 12%;
background: white;
}
#contactmain {
float: left;
height: 100%;
width: 76%;
background: white;
}
#contactright {
float: left;
height: 100%;
width: 12%;
background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="header">
<div id="navbar">
<div id="logo">
<img src="logosmall.png">
</div>
<ul id="top-menu">
<li class="active">
Home
</li>
<li>
Services
</li>
<li>
Moving Tips
</li>
<li>
Get A Quote
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
<div id="home">
Content Here.
</div>
<div id="services">
<div id="servicesleft"></div>
<div id="servicesmain">
<div id="movessec">
Content Here.
</div>
<div id="movessec">
Content Here.
</div>
<div id="movessec">
Content Here.
</div>
</div>
<div id="servicesright"></div>
</div>
<div id="moving">Content here.</div>
<div id="quote">Quote form goes here.</div>
<div id="contact">
<div id="contactleft">Content Here</div>
<div id="contactmain">Content Here</div>
<div id="contactright">Content Here</div>
</div>
</body>

There is simple css solution via Relative position with negative top and padding fixing.
#contact {
z-index: -1;
position: relative;
top: -200px;
padding-top: 200px;
}
Now #contact container start earlier and the content showing in the same position.
Note: you can change the px number and get your own result, and don't forget to lower the z-index container.
Example:
window.onload=function(){
// Cache selectors
var lastId,
topMenu = $("#top-menu"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href='#"+id+"']").parent().addClass("active");
}
});
}//]]>
#font-face {
font-family: 'Montserrat';
src: url('fonts/Montserrat-Regular.otf')
}
#font-face {
font-family: 'MontserratSlim';
src: url('fonts/Montserrat-ExtraLight.otf')
}
body {
font-family: Helvetica, Arial;
margin: 0px;
}
#header {
top: 0px;
}
.signsize {
width: 140px;
height: 90px;
}
.movesimg {
float: right;
}
.packing {
float: left;
}
h1 {
font-family: 'Montserrat';
font-size: 50px;
text-align: right;
color: #3d3d3d;
margin:0;
}
h2 {
margin: 0;
color: #3d3d3d;
}
h3 {
color: #3d3d3d;
}
h4 {
font-family: 'Montserrat';
font-size: 50px;
text-align: left;
color: #3d3d3d;
margin:0;
}
h5 {
font-size: 50px;
padding-top: 60px;
color: #3d3d3d;
margin: 0;
}
h6 {
font-family: 'MontserratSlim';
font-size: 15px;
text-align: left;
color: #929292;
margin:0;
}
#descriptionl {
font-family: 'MontserratSlim';
font-size: 15px;
color: #929292;
margin:0;
}
#descriptionr {
font-family: 'MontserratSlim';
font-size: 15px;
color: #929292;
text-align: right;
margin:0;
}
#movessec {
display: inline-block;
padding-top: 60px;
padding-bottom: 60px;
border-bottom: solid thin #d8d8d8;
}
#navbar {
position: fixed;
z-index: 1;
background: white;
right: 0px;
top: 0px;
width: 100%;
}
#logo {
float: left;
margin-left: 10%;
padding-top: 10px;
padding-bottom: 10px;
}
#top-menu {
z-index: 1;
float: right;
padding-right: 10%;
padding-top: 25px;
padding-bottom: 25px;
}
#top-menu li {
float: left;
list-style-type: none;
white-space: nowrap;
font-size: 15px;
font-family: Montserrat;
text-transform: uppercase;
font-weight: 600;
text-align: center;
letter-spacing: 1px;
}
#more {
padding-left: 50px;
}
#moreR {
padding-right: 50px;
}
#more li {
float: left;
list-style-type: none;
white-space: nowrap;
font-size: 15px;
font-family: Montserrat;
text-transform: uppercase;
font-weight: 600;
text-align: center;
letter-spacing: 1px;
padding: 8px;
outline: #4690d4 solid thin;
text-decoration: none;
}
#moreR li {
float: right;
list-style-type: none;
white-space: nowrap;
font-size: 15px;
font-family: Montserrat;
text-transform: uppercase;
font-weight: 600;
text-align: center;
letter-spacing: 1px;
padding: 8px;
outline: #4690d4 solid thin;
text-decoration: none;
}
#top-menu a {
display: inline;
width: 6em;
text-align: center;
padding: 15px;
-webkit-transition: .5s all ease-out;
-moz-transition: .5s all ease-out;
transition: .5s all ease-out;
color: #545454;
text-decoration: none;
letter-spacing: 1px;
}
#top-menu a:hover {
color: #575757;
}
#top-menu li.active a {
color: white;
position: relative;
background: #4690d4;
}
#home {
padding-left: 70px;
padding-top: 150px;
height: 800px;
background-image: url(img/movingboxes.jpg);
background-size: cover;
background-repeat: no-repeat;
font-family: Montserrat;
}
#services {
height: 1600px;
}
#servicesleft {
float: left;
height: 100%;
width: 12%;
}
#servicesmain {
float: left;
height: 100%;
width: 76%;
}
#servicesright {
float: left;
height: 100%;
width: 12%;
}
#moving {
height: 800px;
padding-top: 50px;
padding-left: 12%;
padding-right: 12%;
background-image: url('img/cardboardbright.jpg');
font-family: Montserrat;
}
#quote {
height: 800px;
background: grey;
}
#contact {
z-index: -1;
height: 325px;
position: relative;
top: -200px;
padding-top: 200px;
}
#contactleft {
float: left;
height: 100%;
width: 12%;
background: white;
}
#contactmain {
float: left;
height: 100%;
width: 76%;
background: white;
}
#contactright {
float: left;
height: 100%;
width: 12%;
background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="header">
<div id="navbar">
<div id="logo">
<img src="logosmall.png">
</div>
<ul id="top-menu">
<li class="active">
Home
</li>
<li>
Services
</li>
<li>
Moving Tips
</li>
<li>
Get A Quote
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
<div id="home">
Content Here.
</div>
<div id="services">
<div id="servicesleft"></div>
<div id="servicesmain">
<div id="movessec">
Content Here.
</div>
<div id="movessec">
Content Here.
</div>
<div id="movessec">
Content Here.
</div>
</div>
<div id="servicesright"></div>
</div>
<div id="moving">Content here.</div>
<div id="quote">Quote form goes here.</div>
<div id="contact">
<div id="contactleft">Content Here</div>
<div id="contactmain">Content Here</div>
<div id="contactright">Content Here</div>
</div>
</body>
EDIT:
Check this js, I think its goes well.
$(window).scroll(function(){
var scrollPosition = $(window).scrollTop();
//get the page height
var pageHeight = $('body').outerHeight();
//get the window height
var windowHeight = $(window).innerHeight();
$('.quoteive').each(function(){
var parent = $(this).parent(),
target = $(this).children('a').attr('href'),
targetPosition = $(target).offset().top - 100,
targetHeight = $(target).outerHeight();
if (scrollPosition > targetPosition && scrollPosition < targetPosition + targetHeight) {
$(this).addClass('active');
} else if (pageHeight - windowHeight <= scrollPosition) {
$(parent).children().removeClass('active');
$(parent).children().last().addClass('active');
} else {
$(this).removeClass('active');
}
})
})
And this is your HTML code:
<ul id="top-menu">
<li class="quoteive">
Home
</li>
<li class="quoteive">
Services
</li>
<li class="quoteive">
Moving Tips
</li>
<li class="quoteive">
Get A Quote
</li>
<li class="quoteive">
Contact Us
</li>
</ul>
If you what to get the switch before the bottom of the page just change this line:
else if (pageHeight - windowHeight <= scrollPosition)
to this line (you can write your choice):
else if (pageHeight - windowHeight <= scrollPosition + 100)
Working fiddle

Develop Reference

JavaScript is the programming language of the Web.

Navbar active scroll on footer - javascript

By setting a min-height to 100vh you can make sure it is always at least the height of the user's screen.

Related

Moving a button in the navbar, best Practices?

dropdown is getting messed up in the menu header

Scroll Nav in Wordpress not working

Why Does My slideToggle Have A Strange Jump Glitch?

How to make link active on bottom scroll

Categories

Resources