I would like to have a collapsed sidebar like this https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapse_sidebar.
However, I do not want the main div to move to the right after the sidebar is opened. Instead, I wish the division can be resize to be fit with the screen size at the moment.
I would greatly appreciate if anyone can help me with this issue.
You can avoid the main div from being pushed right by simply setting the style.marginLeft = "0px" in the openNav() function.
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "0px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="mySidebar" class="sidebar">
×
About
Services
Clients
Contact
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰ Open Sidebar</button>
<h2>Collapsed Sidebar</h2>
<p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>
</div>
</body>
</html>
Related
I am tring to make a glass effect in navbar of my website. Here is the code:
HTML:
<nav class="navbar">
<div class="logo">
Logo
</div>
<div class="mobile_nav">
<i class="fa-solid fa-bars"></i>
</div>
<menu class="menu">
Home
Pricing
About
Get in Touch
</menu>
</nav>
CSS:
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700;900&display=swap');
:root{
--black: #0f0f19;
--gray: #7a7b7f;
--light-gray: #ddd;
--primary: #0da87c;
--white: #fff;
}
*{
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
}
a{
text-decoration: none;
color:var(--black);
}
.navbar{
width:100vw;
width: calc(100vw - 100px);
margin-left: 50px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background: #e2e2e2a6;
display:flex;
justify-content:space-evenly;
height:70px;
line-height: 70px;
position:fixed;
top: 0;
left: 0;
z-index: 99;
backdrop-filter: blur(5px);
}
.navbar a{
padding: 5px 10px;
color: var(--gray);
font-size: 14px;
font-weight: bold;
transition: all .25s ease-in-out;
}
.navbar menu a:hover{
color: var(--black);
}
.mobile_nav{
display: none;
}
.navbar + *{
margin-top:70px;
}
#media screen and (max-width: 768px) {
.mobile_nav{
display: block;
position: fixed;
right: 24px;
}
.navbar menu{
width: calc(100% - 20px);
margin: 0 10px;
position: fixed;
left: 0;
bottom: -50%;
display: flex;
flex-direction: column;
background-color: #333;
line-height: 30px;
border-radius: 30px 30px 0 0;
padding: 10px;
transition: bottom .25s ease-in-out;
}
.mobile_nav{
font-size: 24px;
}
.active{
bottom: 0 !important;
}
}
If you try to view the above code on a mobile screen, you will notice that when you click on the hamburger icon the menu should come from the bottom of the screen but when I add backdrop-filter: unset; to the .navbar class, it is working fine but when I add this, it removes the glass effect.
I'm trying to add the glass effect on both desktop and mobile screens with position: fixed on the inner tag. Help me out please!
I can't seem to find what I am doing wrong here. The transform:translate property is causing a bad effect when the element is hovered.
Please look at this codepen.
https://codepen.io/kuromicho/pen/LYxrQPv
CSS
.row {
max-width: 600px;
margin: 0 auto;
border: 1px solid black;
}
.col {
display: block;
width:50%;
float: left;
border: 1px solid red;
}
.big-icon {
position: relative;
left: 50%;
transform: translateX(-50%);
transition: scale 0.2s;
}
.big-icon {
font-size: 300%;
color: #e67e22;
}
.big-icon:hover {
transform: scale(1.15);
}
HTML:
<head>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
</head>
<body>
<div class="row">
<div class="col">
<ion-icon name="infinite-sharp" class="big-icon"></ion-icon>
</div>
<div class="col">
<ion-icon name="cart-sharp" class="big-icon"></ion-icon>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://unpkg.com/ionicons#5.4.0/dist/ionicons.js"></script>
</html>
I don't know why you defined big-icon class twice in your CSS, but this is my fixes in the bottom of CSS file, take a closer look at those lines of CSS I commented/deleted:
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 62.5%;
height: 100vh;
}
body {
font-size: 20px;
font-family: "Lato", "Arial", sans-serif;
font-weight: 400;
}
.row {
max-width: 600px;
margin: 0 auto;
border: 1px solid black;
}
.col {
display: flex;
justify-content: center;
width: 50%;
/* float: left; */
border: 1px solid red;
}
.big-icon {
/* position: relative; */
/* left: 50%; */
font-size: 300%;
color: #e67e22;
/* transform: translateX(-50%); */
transition: transform 0.2s ease;
}
.big-icon:hover {
transform: scale(1.15);
}
So I have five different coded pages. What I want to do is combine them all into one html page. I have my home page with a navigation bar that links to the other pages but whenever I try to insert my other pages, the multiple pages overlay one another or appear in a column underneath. What sort of code do I need so the clickable links pull up my other pages without it overlaying. Below is a section of my code that I want linked to another page.
}
.container {
position: relative;
width: 50%;
float: left;
}
.image1 {
display: inline-block;
width: 400px;
height: 290px;
margin-top: -10px;
margin-right: 400px;
background-position: 10px 280px;
}
.overlay {
position: absolute;
top: -10px;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 400px;
transition: .5s ease;
background-color: rgba(0, 0, 0, 0);
z-index: -3.0;
}
.container:hover .overlay {
background-color: rgba(0, 0, 0, .7);
height: 290px;
width: 400px;
}
.container:hover .text {
opacity: 1;
}
.text {
font-size: 50px;
position: relative;
width: 330px;
height: 240px;
overflow: scroll;
top: 15%;
left: 48%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
text-align: center;
margin-top: 100px;
display:block;
width:150px;
height: 70px;
border:2px solid #C5E3ED;
color:#ADD7C9;
text-align:center;
text-decoration:none;
}
a { text-decoration: none; color:#C5E3ED }
a:visited { text-decoration: none; color:#C5E3ED; }
a:hover { text-decoration: none; color:#C5E3ED; }
a:focus { text-decoration: none; color:#C5E3ED; }
a:hover, a:active { text-decoration: none; color:#C5E3ED }
<div class="container">
<img src="https://www.pets4homes.co.uk/images/articles/3779/large/how-to-care-for-a-dog-with-a-stomach-upset-58345cd2daf98.jpg" alt="dog" class="image1">
<div class="overlay">
<div class="text">
About
</div>
</div>
</div>
I have used this guide to create a collapsible frame for you.
https://www.w3schools.com/howto/howto_js_collapsible.asp
You can add your html code in div with class="content". Let me know if it is what you wanted.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
/* Style the button that is used to open and close the collapsible content */
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
background-color: #ccc;
}
/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<button class="collapsible">Open Collapsible</button>
<div class="content">
!--- YOUR HTML CODE HERE ---!
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
</body>
</html>
I've a simple page containing: a header, a topnav and a body.
The topnav would contain a link (variable width since it will be the name of the logged user) to open a dropdown menu.
Problem: The dropdown menu is "cropped" by the topnav.
I've tried the z-index solution, but no success.
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
}
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
font-size: 18pt;
font-weight: bold;
}
.topnav {
position: relative;
top:0;
overflow: hidden;
background-color: #333;
font-weight: bold;
z-index: 1;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
cursor:pointer
}
.topnav a:hover {
transition-delay: 70ms;
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.dropdown {
position: absolute;
display: inline-block;
float: right;
overflow: hidden;
margin: 0;
z-index: 100;
}
.dropdown-content {
display: none;
position: absolute;
top: 70%;
padding-top: 0px;
color: #f2f2f2;
background-color: blue;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 200;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
/* Finestra modal */
.container {
padding: 30px;
}
span.psw {
float: right;
padding-top: 16px;
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 30%; /* Could be more or less, depending on screen size */
}
/* Full-width input fields */
.modal input[type=text], .modal input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
.modal button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
font-weight: bold;
}
.imgcontainer {
font-weight: bold;
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
/* The Close Button (x) */
.close {
position: absolute;
right: 9px;
top: -20px;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
<link rel="stylesheet" href="css/topnav.css">
<!-- HEADER -->
<div class="header">
Sistema di Gestione
</div>
<!-- BARRA MENU -->
<div class="topnav" id="navbar">
<a class="active" href="index.php">Home</a>
Segnalazioni
<div class="dropdown"><a>Dropdown></a>
<div class="dropdown-content"><a>BANANA</a></div>
</div>
</div>
<!-- Form di Login -->
<div id="finestra" class="modal">
<div class="modal-content">
<form class="login" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<div class="imgcontainer">
<span onclick="document.getElementById('finestra').style.display='none'" class="close" title="Chiudi finestra">×</span>
</div>
<div class="container">
<input type="text" placeholder="Username" name="username" required>
<input type="password" placeholder="Password" name="password" required>
<button type="submit" name="login" value="login">Login</button>
</div>
</form>
</div>
</div>
<!-- Script per chiudere il modal -->
<script>
// Get the modal
var modal = document.getElementById('finestra');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
Your issue with overflow:hidden given in parent divs of dropdown.
Changed below css
.topnav {
position: relative;
top: 0;
/* overflow: hidden; */ // Removed
background-color: #333;
font-weight: bold;
z-index: 1;
display: block;
width: 100%; // Added
height: 48px; // Added
}
.dropdown {
position: absolute;
display: inline-block;
float: right;
/* overflow: hidden; */ // Removed
margin: 0;
z-index: 100;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
}
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
font-size: 18pt;
font-weight: bold;
}
.topnav {
position: relative;
top:0;
/* overflow: hidden; */
background-color: #333;
font-weight: bold;
z-index: 1;
width: 100%;
height: 48px;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
cursor:pointer
}
.topnav a:hover {
transition-delay: 70ms;
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.dropdown {
position: absolute;
display: inline-block;
float: right;
/*overflow: hidden;*/
margin: 0;
z-index: 100;
}
.dropdown-content {
display: none;
position: absolute;
top: 70%;
padding-top: 0px;
color: #f2f2f2;
background-color: blue;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 200;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
/* Finestra modal */
.container {
padding: 30px;
}
span.psw {
float: right;
padding-top: 16px;
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 30%; /* Could be more or less, depending on screen size */
}
/* Full-width input fields */
.modal input[type=text], .modal input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
.modal button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
font-weight: bold;
}
.imgcontainer {
font-weight: bold;
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
/* The Close Button (x) */
.close {
position: absolute;
right: 9px;
top: -20px;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
<link rel="stylesheet" href="css/topnav.css">
<!-- HEADER -->
<div class="header">
Sistema di Gestione
</div>
<!-- BARRA MENU -->
<div class="topnav" id="navbar">
<a class="active" href="index.php">Home</a>
Segnalazioni
<div class="dropdown"><a>Dropdown></a>
<div class="dropdown-content"><a>BANANA</a></div>
</div>
</div>
<!-- Form di Login -->
<div id="finestra" class="modal">
<div class="modal-content">
<form class="login" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<div class="imgcontainer">
<span onclick="document.getElementById('finestra').style.display='none'" class="close" title="Chiudi finestra">×</span>
</div>
<div class="container">
<input type="text" placeholder="Username" name="username" required>
<input type="password" placeholder="Password" name="password" required>
<button type="submit" name="login" value="login">Login</button>
</div>
</form>
</div>
</div>
<!-- Script per chiudere il modal -->
<script>
// Get the modal
var modal = document.getElementById('finestra');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
My social network , faq and where to buy's link is arrange inside footer section but it cannot stick it at bottom of my page , and i feel my HTML structure very weird can anyone help me on this ? Thank you
I want it to be like this with the FAQ and Where to Buy at the left bottom , social network logo at right bottom of the page and LOGO in the middle of 4 navigation linkOutput that i want
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
body {
background-image: url(Images/Clean-Gray-BackGround-620x465.jpg);
background-repeat: repeat-x;
background-size: cover;
background-attachment: fixed;
margin: 0;
}
#page {
margin: 0px auto;
width: 1200px;
}
header {
height: 20px;
position: relative;
margin: 30px 0 0;
}
.mainnav {
padding-top: 50px;
position: relative;
width: 1200px;
}
button {
font-size: 20px;
font-family: 'Bungee';
text-align: center;
border: none;
background-color: transparent;
padding: 16px 16px 40px 0px;
}
.dropdown {
display: inline-block;
position: relative;
}
.divider {
margin-left: 100px;
margin-right: 260px;
}
.divider2 {
margin-left: 150px;
}
#submenu {
display: none;
background-color: transparen;
text-align: center;
min-width: 60px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
position: absolute;
}
#submenu a {
color: black;
padding: 0 0 40 0;
text-decoration: none;
display: block;
}
.dropdown:hover #submenu {
display: block;
}
.logo {
position: absolute;
left: 45%;
margin: -48px 0 0 -98px;
}
#cart a {
position: absolute;
/* Position them relative to the browser window */
right: -80px;
/* Position them outside of the screen */
transition: 0.3s;
/* Add transition on hover */
padding: 15px;
/* 15px padding */
width: 100px;
/* Set a specific width */
text-decoration: none;
/* Remove underline */
font-size: 20px;
/* Increase font size */
color: black;
/* White text color */
background-color: white;
border-radius: 15px 0px 0px 15px;
}
#cart a:hover {
right: 0;
text-decoration: none;
}
.sidenav {
height: 100%;
/* 100% Full-height */
width: 0;
/* 0 width - change this with JavaScript */
position: fixed;
/* Stay in place */
z-index: 1;
/* Stay on top */
top: 0;
left: 0;
background-color: #111;
/* Black*/
overflow-x: hidden;
/* Disable horizontal scroll */
padding-top: 60px;
/* Place content 60px from the top */
transition: 0.5s;
/* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover,
.offcanvas a:focus {
color: blanchedalmond;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
.btmcontainer {
max-width: 1200px;
margin: 0 auto;
}
.social li {
float: right;
display: inline;
list-style: none;
}
.faqwtb a {
color: black;
padding-top: 50rem;
background-color: white;
padding: 20px;
position: relative;
float: left;
text-decoration: none;
border-radius: 25px 25px 25px 25px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="HomeCSS.css" rel="stylesheet" type="text/css" />
<link href="font.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css" />
<script src="GTech.js"></script>
</head>
<div id="page">
<body>
<header>
<img class="logo" src="Images/17622275_1491915637509717_1227569229_o.png" width="250" height="250" />
<div class="mainnav">
<button style="height:20px;width:120px;margin-left:90px">Notice</button>
<button class="divider" style="height:20px;width:120px">Products</button>
<div class="dropdown">
<button id="svc" style="height:20px;width:120px">Services</button>
<div id="submenu">
Help Center
<hr />
Service Center
</div>
</div>
<button class="divider2" style="height:20px;width:120px">About Us</button>
</div>
</header>
<div id="cart" class="scart">
<span onclick="openNav()">Shopping Cart</span>
</div>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
</body>
<footer>
<div class="btmcontainer">
<div class="faqwtb">
<span>FAQ</span>
<span>Where to Buy</span>
</div>
<div class="btmcol">
<ul class="social">
<li>
<img src="Images/footericon/facebook.png" />
</li>
<li>
<img src="Images/footericon/twitter.png" />
</li>
<li>
<img src="Images/footericon/google+.png" />
</li>
<li>
<img src="Images/footericon/tumblr.png" />
</li>
</ul>
</div>
</div>
</footer>
</div>
</html>
Change your CSS to this...
You have used position relative everywhere. Remove them. Get the position of footer in the correct place and then position your page components.
Check my fiddle: https://jsfiddle.net/mpriyam/s8xhr5wv/
CSS Should be...
body {
background-image: url(Images/Clean-Gray-BackGround-620x465.jpg);
background-repeat: repeat-x;
background-size: cover;
background-attachment: fixed;
margin: 0;
}
#page {
margin: 0px auto;
width: 1200px;
}
header {
height: 20px;
margin: 30px 0 0;
}
.mainnav {
padding-top: 50px;
width: 1200px;
}
button {
font-size: 20px;
font-family: 'Bungee';
text-align: center;
border: none;
background-color: transparent;
padding: 16px 16px 40px 0px;
}
.dropdown {
display: inline-block;
}
.divider {
margin-left: 100px;
margin-right: 260px;
}
.divider2 {
margin-left: 150px;
}
#submenu {
display: none;
background-color: transparen;
text-align: center;
min-width: 60px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
position: absolute;
}
#submenu a {
color: black;
padding: 0 0 40 0;
text-decoration: none;
display: block;
}
.dropdown:hover #submenu {
display: block;
}
.logo {
left: 45%;
margin: -48px 0 0 -98px;
}
#cart a {
/* Position them relative to the browser window */
right: -80px;
/* Position them outside of the screen */
transition: 0.3s;
/* Add transition on hover */
padding: 15px;
/* 15px padding */
width: 100px;
/* Set a specific width */
text-decoration: none;
/* Remove underline */
font-size: 20px;
/* Increase font size */
color: black;
/* White text color */
background-color: white;
border-radius: 15px 0px 0px 15px;
}
#cart a:hover {
right: 0;
text-decoration: none;
}
.sidenav {
height: 100%;
/* 100% Full-height */
width: 0;
/* 0 width - change this with JavaScript */
/* Stay in place */
z-index: 1;
/* Stay on top */
top: 0;
left: 0;
background-color: #111;
/* Black*/
overflow-x: hidden;
/* Disable horizontal scroll */
padding-top: 60px;
/* Place content 60px from the top */
transition: 0.5s;
/* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover,
.offcanvas a:focus {
color: blanchedalmond;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
.btmcontainer {
max-width: 1200px;
clear:both;
margin: 0 auto;
}
.social li {
float: right;
display: inline;
list-style: none;
}
.faqwtb a {
color: black;
padding-top: 50rem;
background-color: white;
padding: 20px;
text-decoration: none;
border-radius: 25px 25px 25px 25px;
}