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?
Related
So I was creating a website and I decided to make a modal type form using only Html, CSS, and js... I followed the tutorial and completed it..but now I am stuck...Every time the page opens or reloads, the modal pops up... I only want it to pop up when I click the login button ... Is there any way I can do this...any help would be appreciated...Here's the code
Html:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
<!-- {% load static %} -->
<link rel="shortcut icon" href="https://lh3.googleusercontent.com/a-/AOh14Gib1NYf2ZSICywbbqOUXh6laaEP1NJYCj18Mz-jBg=s96-c-rg-br100" type="image/jpg" />
<link rel="stylesheet" href="../static/Css/home.css" />
<script src="https://kit.fontawesome.com/fb5fc8c33b.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script defer src="../static/Js/home.js"></script>
</head>
<body>
<nav>
<ul>
<li class="logo">
<img src="../static/Images/Precious-san.jpg" />
</li>
<li class="responsive-bar"><span class="fas fa-bars"></span></li>
<div class="nav-lists">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</div>
<li class="search-box">
<input type="search" placeholder="Search" autocomplete="off" />
<label class="search-icon">
<span class="fas fa-search"></span>
</label>
</li>
</ul>
</nav>
<div class='losn'>
<button id='login-btn' onclick='showLoginForm' ><a>Login</a></button>
<p>or</p>
<button id='signup-btn' >Sign up</button>
</div>
<div class='login-bg' >
<div class='login-content' >
<div class='close' onclick='hideLoginForm()' >+</div>
<h3>Login</h3>
<input type='email' placeholder='Email' id='email'><br>
<input type='password' placeholder='Password' id='password'><br>
<label for='show-password' >
<input type='checkbox' id='show-password' onclick='showPassword()' > Show Password
</label><br>
<input type='submit' value='Login' id='submit'>
</div>
</div>
</body>
</html>
Css:
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
/* Global Variables */
:root {
--imperialred: #E63946;
--honeydew: #F1FAEE;
--powderblue: #A8DADC;
--celadonblue: #457B9D;
--prussianblue: #1D3557;
}
/* Css starts here */
* {
margin: 0;
border: 0;
/* box-sizing: border-box; */
font-family: 'Montserrat', sans-serif;
}
nav ul li img {
width: 60px;
height: 60px;
border-radius: 50%;
}
nav ul li.logo {
flex: 1;
}
nav {
background-color: var(--prussianblue);
color: var(--honeydew);
padding: 10px 40px 10px 70px;
border-left: none;
border-right: none;
}
nav ul {
display: flex;
list-style: none;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
nav ul div.nav-lists {
display: inline-flex;
padding: 0 25px;
}
nav ul div li a {
color: var(--honeydew);
text-decoration: none;
font-size: 18px;
padding: 0 15px;
}
nav ul div li a:hover {
color: var(--imperialred);
}
nav ul .search-box {
height: 40px;
width: 240px;
display: flex;
background-color: var(--imperialred);
border-radius: 5px;
}
nav ul .search-box input {
height: 100%;
width: 200px;
border: none;
outline: none;
border-radius: 5px 0 0 5px;
padding: 0 10px;
font-size: 16px;
}
nav ul .search-box .search-icon {
height: 100%;
width: 40px;
line-height: 40px;
text-align: center;
cursor: pointer;
border-radius: 0 5px 5px 0;
}
nav ul .search-box .search-icon:hover {
color: #000
}
nav ul .search-box .search-icon span {
font-size: 18px;
}
nav ul .responsive-bar {
font-size: 29px;
display: none;
flex: 1;
padding: 0 40px;
}
nav ul .responsive-bar span {
height: 42px;
width: 42px;
text-align: center;
line-height: 42px;
border-radius: 5px;
cursor: pointer;
}
nav ul .responsive-bar span.show:before {
content: '\f00d';
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
padding: 0 40px;
z-index: -2;
}
.content .text {
font-size: 40px;
font-weight: 800;
padding: 5px 0;
color: #202020;
}
.content .p {
font-size: 28px;
font-weight: 600;
color: #202020;
}
div.losn {
position: sticky;
top: 5px;
display: grid;
text-align: center;
justify-content: flex-end;
font-size:14px;
margin: 5px;
}
div.losn button {
background: transparent;
border: none;
outline: none;
cursor: pointer;
color: var(--honeydew);
background-color: var(--prussianblue);
}
div.losn button:hover {
color: var(--imperialred);
}
body {
background-color: var(--powderblue)
}
div.login-bg {
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.7);
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
div.login-content {
width: 500px;
height: 300px;
background-color: var(--celadonblue);
border-radius: 5px;
display: grid;
align-items: center;
justify-content: center;
position: relative;
}
div.login-content h3 {
font-size: 30px;
text-align: center;
margin-top: 10px;
color: var(--honeydew)
}
div.login-content input {
outline: none;
border: 1px solid var(--prussianblue);
border-radius: 5px;
}
div.login-content #email, #password {
height: 30px;
width: 250px;
padding-left: 10px;
}
div.login-content #email {
margin-top: 30px;
}
div.login-content #submit {
height: 30px;
width: 100%;
background: var(--honeydew);
cursor: pointer;
margin-bottom: 20px;
}
div.login-content #submit:hover {
background-color: #EFEFEF;
}
div.login-content label {
cursor: pointer;
color: var(--honeydew)
}
div.close {
position: absolute;
top: 0;
right: 13px;
font-size: 40px;
color: var(--honeydew);
cursor: pointer;
transform: rotate(45deg);
}
div.close:hover {
color: var(--imperialred);
}
/* Responsive */
#media screen and (max-width: 896px) {
nav {
padding: 10px 40px 10px 0px;
}
}
#media screen and (max-width: 826px) {
nav ul li.responsive-bar {
display: block;
padding-left: 10px;
}
nav {
z-index: 1;
padding: 10px 40px 10px 0px;
}
nav .logo {
display: none;
}
nav ul div.nav-lists {
z-index: -1;
position: fixed;
top: -220px;
width: 100%;
background-color: var(--celadonblue);
right: 0;
display: inline-block;
transition: top .4s;
}
nav ul div.nav-lists.show {
top: 60px;
}
nav ul div.nav-lists li {
text-align: center;
line-height: 30px;
margin: 30px 0;
}
nav ul div.nav-lists li a {
font-size: 19px;
}
nav ul {
padding: 0;
}
}
#media screen and (max-width: 445px) {
nav ul {
flex-wrap: nowrap;
padding: none;
}
nav ul li.search {
width: 50vmin;
}
nav ul li input {
width: 40vmin;
}
nav ul li .search-box {
width: 10vmin;
}
nav ul li.responsive-bar {
padding-left: 10px;
}
}
Javascript:
$('nav ul li.responsive-bar span').click(function() {
$('nav ul div.nav-lists').toggleClass("show");
$('nav ul li.responsive-bar span').toggleClass("show");
});
// Show password function
function showPassword() {
let passwordType = document.getElementById("password");
if (passwordType.type == "password") {
passwordType.type = "text";
}
else {
passwordType.type = "password";
}
}
// login form visibility function
document.querySelector('.close').addEventListener("click", function hideLoginForm() {
document.querySelector('.login-bg').style.display = "none";
});
document.getElementById('login-btn').addEventListener("click", function showLoginForm() {
document.querySelector('.login-bg').style.display = "flex";
});
Step: 1 First of all, you have to hide the pop up modal
div.login-content {
display: none;
}
Step 2: Remove the CSS as below
div.login-bg {
position: absolute;
background: rgba(0, 0, 0, 0.7);
}
Stpe 3: Using javascript we will add the class as follows
document.querySelector('.close').addEventListener("click", function hideLoginForm() {document.querySelector('.login-bg').classList.remove("login_transparent"); });
document.getElementById('login-btn').addEventListener("click", function showLoginForm() { document.querySelector('.login-bg').classList.add("login_transparent"); });
Step 4: Add the Styles based on the class you have added in the javascript
.login_transparent {
position: absolute;
background: rgba(0, 0, 0, 0.7);
}
.login_transparent .login-content {
display: grid;
}
Here is my working fiddle
https://jsfiddle.net/Rajkumar007/ovjruq32/
You need to hide the modal when js is loaded
So add document.querySelector('.login-bg').style.display = "none"; at the beginning of your code.
$('nav ul li.responsive-bar span').click(function() {
$('nav ul div.nav-lists').toggleClass("show");
$('nav ul li.responsive-bar span').toggleClass("show");
});
document.querySelector('.login-bg').style.display = "none"; //hide login-bg
// Show password function
function showPassword() {
let passwordType = document.getElementById("password");
if (passwordType.type == "password") {
passwordType.type = "text";
}
else {
passwordType.type = "password";
}
}
// login form visibility function
document.querySelector('.close').addEventListener("click", function hideLoginForm() {
document.querySelector('.login-bg').style.display = "none";
});
document.getElementById('login-btn').addEventListener("click", function showLoginForm() {
document.querySelector('.login-bg').style.display = "flex";
});
and here is a demo : https://jsfiddle.net/mbp49wa7/
I'm a beginner trying to code a navbar in a practice website but I can't get the final product right.
My navbar is supposed to line up horizontally along the top of the page and then be follow the page as you scroll with a black shadow backdrop. Currently when you load the page, the words line up vertically on the right side, and then condense when you scroll. I also have a logo in the top left that shrinks way too small. Finally, when when you shrink the page, a hamburger icon pops up in the top right that is supposed to show you the menu options, however it no longer works. It's like a cycle with this page, I fix one thing and break another. I am doing this just for fun because I'm trying to learn but now I'm getting frustrated, Thanks!
$(window).on('scroll', function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
})
$(document).ready(function() {
$(".menu i").click(function() {
$("nav ul").toggleClass("active")
})
})
#import url('https://fonts.googleapis.com/css?family=Bungee|Bungee+Hairline|Oswald|Raleway&display=swap');
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
padding: 10px 100px;
box-sizing: border-box;
transition: .5s;
}
nav.black {
background: rgba(0, 0, 0, .8);
height: 80px;
padding: 10px 50px;
}
nav.logo {
float: left;
}
nav .logo img {
height: 80px;
transition: .5s;
}
nav.black .logo img {
padding: 20px;
height: 60px;
}
nav ul {
float: right;
margin: 0;
padding: 0px;
display: flex;
text-shadow: 2px 2px 4px #000000;
}
nav ul li {
List-style: none;
}
nav ul li a {
Line-height: 80px;
color: #fff;
padding: 5px 20px;
font-family: 'Raleway', sans-serif;
text-decoration: none;
text-transform: uppercase;
transition: .5s;
}
nav.black ul li a {
color: #fff;
Line-height: 20px;
}
nav ul li a.active,
nav ul li a:hover {
color: #fff;
background: #008cff;
}
.responsive-bar {
display: none;
}
#media (max-width: 800px) {
.responsive-bar {
display: block;
width: 100%;
height: 60px;
background: #262626;
position: fixed;
top: 0;
Left: 0;
padding: 5px 20px;
box-sizing: border-box;
z-index: 1;
}
.responsive-bar .logo img {
float: left;
height: 50px;
}
.responsive-bar .menu i {
float: right;
color: #fff;
margin: 0;
padding: 0;
Line-height: 50px;
cursor: pointer;
text-transform: uppercase;
}
nav {
padding: 60px;
}
nav.black {
display: none;
background: #262626;
height: 60px;
padding: 0;
}
nav .logo {
display: none;
}
nav ul {
position: absolute;
width: 100%;
top: 60;
Left: 0;
background: #262626;
float: none;
display: none;
}
nav ul.active {
display: block;
}
nav ul li {
width: 100%
}
nav ul li a {
display: block;
padding: 15px;
width: 100%;
height: 60px;
text-align: center;
Line-height: 30px;
color: #fff;
}
}
* {
box-sizing: border-box;
}
.main {
height: 1000px;
padding-left: 20px;
padding-right: 100px;
}
<div class="responsive-bar">
<div class="logo">
<img src="img/logo.png">
</div>
<div class="menu">
<i class="fa fa-bars"></i>
</div>
</div>
<nav>
<div class="logo">
<img src="img/logo.png">
</div>
<ul>
<div class="active">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</div>
</ul>
</nav>
<div class="main">
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
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;*/
}
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
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.