Can someone help to turn this sidebar into hamburger base on ratio?

Can someone help to turn this sidebar into hamburger base on ratio? - html

Hey i new to this web code thing, and i need help from all of you.
I have side menu that i need to convert it to hamburger menu when the screen is small mobile sized.
I need all of this content <div id="mySidebar" class="sidebar"> to be hamburger menu on mobile scale ratio
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.sidebar {
height: 300px;
width: 180px;
position: fixed;
top: 0;
left: 10px;
background-color: white;
padding-top: 60px;
margin-top: 200px;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 20px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 12px;
color: #858585;
display: block;
margin-top: -10px;
margin-left: -10px;
}
.sidebar a:hover {
color: #0E73B9;
}
main .sidebar {
position: absolute;
top: 0;
right: 100px;
font-size: 36px;
margin-left: 50px;
}
.material-icons,
.icon-text {
vertical-align: middle;
}
.material-icons {
margin-right: 30px
}
#main {
transition: margin-left 0.5s;
padding: 16px;
margin-left: 250px;
}
#media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
.dropdown {
position: block;
display: inline-block;
background-color: white;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
/*box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);*/
border-radius: 20px;
margin-left: 20px;
text-align: center;
height: 80px;
margin-top: -30px;
}
.dropdown-content a {
color: #858585;
padding: 12px 16px;
text-decoration: none;
display: block;
margin-top: 1px;
background-color: white;
margin-left: 5px;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
background-color: white;
}
.dropdown:hover .down {
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div id="mySidebar" class="sidebar">
<span><i class="material-icons">home</i><span class="icon-text">Dashboard</span><br>
<div class="dropdown">
<div class="down">
<i class="material-icons">info</i><span class="icon-text"></span>Monitoring</span>
</a><br>
</div>
<div class="dropdown-content">
Reader
RFID
</div>
</div>
<i class="material-icons">settings</i><span class="icon-text"></span>Settings</span><br>
<i class="material-icons">logout</i><span class="icon-text"></span>Logout<span>
</div>
</body>

You can do something like this, I guess you can do further editing to match style that you use but most of the css you can re-use. If you check snippet from below in full screen and try to resize your browser you will see how your menu switch to hamburger menu when window size becomes less than 1000px
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.sidebar {
height: 300px;
width: 180px;
position: fixed;
top: 0;
left: 10px;
background-color: white;
padding-top: 60px;
margin-top: 200px;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 20px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 12px;
color: #858585;
display: block;
margin-top: -10px;
margin-left: -10px;
}
.sidebar a:hover {
color: #0E73B9;
}
main .sidebar {
position: absolute;
top: 0;
right: 100px;
font-size: 36px;
margin-left: 50px;
}
.material-icons,
.icon-text {
vertical-align: middle;
}
.material-icons {
margin-right: 30px
}
#main {
transition: margin-left 0.5s;
padding: 16px;
margin-left: 250px;
}
#media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
.dropdown {
position: block;
display: inline-block;
background-color: white;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
/*box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);*/
border-radius: 20px;
margin-left: 20px;
text-align: center;
height: 80px;
margin-top: -30px;
}
.dropdown-content a {
color: #858585;
padding: 12px 16px;
text-decoration: none;
display: block;
margin-top: 1px;
background-color: white;
margin-left: 5px;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
background-color: white;
}
.dropdown:hover .down {
background-color: white;
}
#menuToggle {
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle a {
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
#menuToggle a:hover {
color: tomato;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
/* hide this */
z-index: 2;
/* and place it over the hamburger */
-webkit-touch-callout: none;
}
/*
* Just a quick hamburger
*/
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
/*
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked~span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
/*
* But let's hide the middle one.
*/
#menuToggle input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu {
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
#menu li {
padding: 10px 0;
font-size: 22px;
display: flex;
align-items: center;
}
nav {
display: none;
}
/*
* And let's slide it in from the left
*/
#menuToggle input:checked~ul {
transform: none;
}
#media screen and (max-width: 1000px) {
.sidebar {
display: none;
}
nav {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<nav role="navigation">
<div id="menuToggle">
<!--
A fake / hidden checkbox is used as click reciever,
so you can use the :checked selector on it.
-->
<input type="checkbox" />
<!--
Some spans to act as a hamburger.
They are acting like a real hamburger,
not that McDonalds stuff.
-->
<span></span>
<span></span>
<span></span>
<!--
Too bad the menu has to be inside of the button
but hey, it's pure CSS magic.
-->
<ul id="menu">
<a href="#">
<li><i class="material-icons">home</i>Dashboard</li>
</a>
<a href="#">
<li><i class="material-icons">info</i>Monitoring</li>
</a>
<a href="#">
<li><i class="material-icons">settings</i>Settings</li>
</a>
<a href="#">
<li><i class="material-icons">logout</i>Logout</li>
</a>
</ul>
</div>
</nav>
<div id="mySidebar" class="sidebar">
<span><i class="material-icons">home</i><span class="icon-text">Dashboard</span><br>
<div class="dropdown">
<div class="down">
<i class="material-icons">info</i><span class="icon-text"></span>Monitoring</span>
</a><br>
</div>
<div class="dropdown-content">
Reader
RFID
</div>
</div>
<i class="material-icons">settings</i><span class="icon-text"></span>Settings</span><br>
<i class="material-icons">logout</i><span class="icon-text"></span>Logout<span>
</div>
</body>
</html>

Related

Issues with mobile nav

I'm trying to make the desktop nav hidden on mobile, but for some reason it doesn't hide until i increase the max-width to 1000px+, which shouldn't happen because all the phones I've tested on are only 400-500px wide. I can only assume it's something else in my code causing this but not sure what to change to fix it.
body {
margin: 0;
}
ul {
list-style: none;
}
.rnav {
background-color: rgb(40, 40, 44);
height: 60px;
}
.darkbg {
background-color: rgb(55, 55, 59);
}
a {
text-decoration: none;
}
.navbtn:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #FFF;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out;
}
.navbtn:hover:before {
visibility: visible;
transform: scaleX(1);
}
.logo {
width: 250px;
max-width: 300px;
margin-left: 20px;
transition: all ease .3s;
}
.locn {
height: 60px;
display: flex;
justify-content: flex-start;
align-items: center;
float: left;
}
.logo:hover {
transform: scale(1.05);
}
.logreg {
margin-right: 10px;
height: 60px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.logbtn {
background-color: rgb(8, 98, 182);
color: #fff;
padding: 10px 22px;
border: none;
border-radius: 5px;
box-shadow: 0 4px 0 0 rgb(3, 66, 124);
transition: all .3s;
cursor: pointer;
}
.regbtn {
background-color: rgb(14, 138, 209);
color: #fff;
padding: 10px 24px;
margin-left: 10px;
border: none;
border-radius: 5px;
box-shadow: 0 4px 0 0 rgb(6, 96, 148);
transition: all .3s;
cursor: pointer;
}
.logbtn:focus,.regbtn:focus {
outline: none;
}
.logbtn:active,.regbtn:active {
box-shadow: none;
transform: translateY(3px);
}
.navlist {
float: left;
}
.mnav {
display: block;
position: absolute;
right: 25px;
top: 10px;
z-index: 100;
}
#media screen and (min-width: 800px) {
.mnav {
display: none;
}
}
#media screen and (max-width: 800px) {
.rnav #myLinks {
display: none;
}
.logreg {
display: none;
}
}
<html>
<head>
<link href="css/style.css" rel="stylesheet">
<link href="css/icon.css" rel="stylesheet">
<link href="https://kit-pro.fontawesome.com/releases/latest/css/pro.min.css" media="all" rel="stylesheet">
</head>
<body class="darkbg">
<nav class="rnav">
<a href="#" class="locn">
<img src="https://cdn.discordapp.com/attachments/833803478618996756/834522746548387888/Rocrates_logo.png" class="logo">
</a>
<ul class="navlist" id="myLinks">
<li class="navbtn2">
<a>Crates</a>
</li>
<li class="navbtn">
<a>Coinflip</a>
</li>
</ul>
<div class="logreg">
<button class="logbtn"><i class="fas fa-user-friends"></i> Login</button>
<a href="/register">
<button class="regbtn"><i class="fas fa-user-plus"></i> Register</button>
</a>
</div>
<div id="nav-icon3" class="mnav">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

Add this line of code into the head of your document:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
Your browser is essentially creating a smaller 'zoomed out' image of your page rather than ACTUALLY resizing it. See here.

Vertical Hamburger side navigation bar is creating a blank space on the right side of the screen. Shown only in mobile version

I have a responsive hamburger side navigation bar on the upper right of my website. When user clicks, the sub-menus appear vertically. There is no problem when viewed in PC, but, when viewed in mobile, there is a blank space on the right side of the screen, as shown below:
I searched everywhere to find the answer, such as adjusting the width of the screen, placing the width as 100%, writing body and HTML {overflow-x: hidden;}, etc..
After doing more research, I finally found out that the blank space is a vertical hamburger navigation bar. Simply put, if a user clicks on the hamburger menu, the vertical sub-menu is sliding to from right to left.
If I write width: 100% in .nav-links in #media of CSS, more blank space is created on the right since the side navigation bar would slide full screen from right to left.
I'm wondering whether there is any way I can have this responsive vertical hamburger side-menu without having any of the spacing issue?
The issue belongs to here in CSS:
#media screen and (max-width: 950px) {
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 10vh;
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
width: 40%;
transform: translateX(100%);
padding-right: 2em;
transition: transform 0.5s ease-in;
z-index: 99999;
}
Below is a full-code for my website:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="monday.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>J[a]son</title>
</head>
<body>
<nav>
<div class = "logo">
<h4>J[a]son</h4>
</div>
<ul class = "nav-links">
<li>
HOME
</li>
<li>
PHOTOGRAPHY
<ul class="sub-menu">
<li>Colour</li>
<li>Black</li>
</ul>
</li>
<li>
CODING
</li>
<li>
ABOUT
</li>
</ul>
<div class= "burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="testing.js"></script>
<div class="main_car_wrapper">
<img class="main_car" src="Photos/main_car1.jpg" alt="car" width="100%" height="100%"/>
</div>
<!--<p>June, 2020. Sunshine Coast, BC, Canada </p>-->
<div class ="bottom">
<div class = "logos">
<p id = "paragraph">TESTING</p>
</div>
</div>
</body>
</html>
CSS
html {
min-height: 100vh;
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
background-color: black !important; /*rgb(241, 233, 233);*/
display: flex;
flex-direction: column;
min-height: 100vh;
}
nav {
display: flex !important;
justify-content: space-between;
/*padding-right: 2em;*/
padding-left: 2em;
padding-top: 2em;
padding-bottom: 1.5em;
align-items: center;
min-height: 8vh;
background-color: black;
/*font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;*/
font-family: 'Poppins', sans-serif;
}
.logo {
background-color: black;
color: rgb(240, 235, 235);
font-size: 20px;
text-transform: uppercase;
letter-spacing: 5px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: white;
text-decoration: none;
letter-spacing: 1px;
font-weight: bold;
font-size: 11px;
/*padding: 5px 5px;*/
}
.nav-links a:hover {
text-decoration: none;
color: white;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width:1430px) {
.nav-links {
width: 40%;
}
}
#media screen and (max-width:950px) {
* {
margin: 0;
padding: 0;
}
body, html {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 10vh;
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
width: 40%;
transform: translateX(100%);
padding-right: 2em;
transition: transform 0.5s ease-in;
z-index: 99999;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
padding-right: 1em;
}
.sub-menu {
position: relative;
}
.carousel-control-prev {
padding-top: 5em;
}
.carousel-control-next {
padding-top: 5em;
}
.carousel-item {
padding-top: 6em;
}
.logos {
padding-bottom: 0em;
}
}
.nav-active {
transform: translate(0%);https://ahweb.org.uk/car.png
}
.main_car_wrapper {
background-image: url(https://ahweb.org.uk/car.png);
background-repeat: no-repeat no-repeat;
background-position: center center;
background-size: contain;
max-width: 100%;
height: auto;
padding-top: 6em;
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity :1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
.sub-menu {
display: none;
}
.sub-menu li a {
/*display: block;*/
text-decoration: none;
color: white;
border-top: 1px solid white;
background: rgb(221, 215, 215);
white-space: nowrap;
top: 40px;
left: 25px;
padding: 5px;
padding-top: 1px;
}
.sub-menu li a:hover{
background: rgb(10, 10, 10);
opacity: 1;
transition: all 0.5s ease;
}
li:hover ul {
display: flex;
position: absolute;
}
li:hover li {
float: none;
font-size: 8px;
}
li:hover a {
background: rgb(5, 5, 5);
}
li:hover li a:hover {
background: rgb(19, 18, 18);
}
.bottom {
margin-top: auto;
}
.logos {
display: flex !important;
flex-direction: row;
background-color: black;
}
.logos a {
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 17px;
}
.logos a:hover {
text-decoration: none;
color: white;
}
.carousel-inner p {
text-align: center;
color: black;
font-size: 14px;
}
.carousel-inner {
background-color: black;
}
.carousel-inner img {
display: flex;
margin: 0 auto;
width: 50vw;
max-height: auto;
align-items: center;
}
/*.carousel-item {
height: 300px
}*/
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
JS:
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
//Toggle Nav
burger.addEventListener('click', () => {
//Toggle Nav
nav.classList.toggle('nav-active');
//Animate Links
navLinks.forEach((link, index) => {
if(link.style.animation) {
link.style.animation = ''
} else {
link.style.animation = `navLinkFade 0.2s ease forwards ${index / 7 + 0.5}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
//Animate Links
}
navSlide();

Text between the anchor tags on a button is not getting displayed

For some reason I am unable to get the text between the anchor tags on a button to display.
Below is my HTML and CSS code. CSS is a direct copy from here with some modification.
I unable to figure out where I have gone wrong.
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font: bold 14px/1.4 'Open Sans', arial, sans-serif;
background: #EBF0DC;
}
ul {
margin: 150px auto 0;
padding: 0;
list-style: none;
display: table;
width: 600px;
text-align: center;
}
li {
display: table-cell;
position: relative;
padding: 15px 0;
}
a {
color: rgb(7, 5, 5) !important;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
display: inline-block;
padding: 15px 20px;
position: relative;
}
ul a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: rgb(233, 108, 25);
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
a:hover:after {
width: 100%;
left: 0;
}
#media screen and (max-height: 300px) {
ul {
margin-top: 40px;
}
}
/* Navigation ends here */
h1 {
color: #ff4411;
font-size: 48px;
font-family: 'Signika', sans-serif;
padding-bottom: 10px;
text-align: center;
}
/* Button */
.container {
padding-top: 1em;
margin-top: 1em;
border-top: solid 1px #CCC;
width: 200px;
margin: 20px auto;
}
a.button {
display: block;
position: relative;
float: left;
width: 120px;
padding: 0;
margin: 30px;
font-weight: 600;
text-align: center;
line-height: 50px;
border-radius: 5px;
transition: all 0.2s;
}
/* FLOAT */
.btnFloat:before {
content: 'Float';
display: block;
position: absolute;
top: 0;
left: 0;
width: 120px;
height: 50px;
border-radius: 5px;
transition: all 0.2s;
}
.btnBlueGreen.btnFloat:before {
background: #00AE68;
}
.btnLightBlue.btnFloat:before {
background: #5DC8CD;
}
.btnOrange.btnFloat:before {
background: #FFAA40;
}
.btnFloat:before {
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.4);
}
.btnFloat:hover:before {
margin-top: -2px;
margin-left: 0px;
transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, 0.25);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="You can get coached on anything. Always free.">
<title>Careless2Naysayers | Life Coaching by Pradeep Kumar P</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div>
<h1>CareLess2Naysayers</h1>
</div>
<div class="container">
Students
Teachers
Parents
</div>
</body>
</html>
This is how it is getting displayed. As you can see the word 'Float' is showing up and not the one I have intended.

This issue can be solved with update CSS code that I have add below.
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font: bold 14px/1.4 'Open Sans', arial, sans-serif;
background: #EBF0DC;
}
ul {
margin: 150px auto 0;
padding: 0;
list-style: none;
display: table;
width: 600px;
text-align: center;
}
li {
display: table-cell;
position: relative;
padding: 15px 0;
}
a {
color: rgb(7, 5, 5) !important;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
display: inline-block;
padding: 15px 20px;
position: relative;
}
ul a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: rgb(233, 108, 25);
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
a:hover:after {
width: 100%;
left: 0;
}
#media screen and (max-height: 300px) {
ul {
margin-top: 40px;
}
}
/* Navigation ends here */
h1 {
color: #ff4411;
font-size: 48px;
font-family: 'Signika', sans-serif;
padding-bottom: 10px;
text-align: center;
}
/* Button */
.container {
padding-top: 1em;
margin-top: 1em;
border-top: solid 1px #CCC;
width: 200px;
margin: 20px auto;
display: block;
}
a.button {
display: block;
position: relative;
float: left;
width: 120px;
padding: 0;
margin: 30px;
font-weight: 600;
text-align: center;
line-height: 50px;
border-radius: 5px;
transition: all 0.2s;
}
/* FLOAT */
.btnFloat:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 120px;
height: 50px;
border-radius: 5px;
transition: all 0.2s;
z-index: -1;
}
.btnBlueGreen.btnFloat:before {
background: #00AE68;
}
.btnLightBlue.btnFloat:before {
background: #5DC8CD;
}
.btnOrange.btnFloat:before {
background: #FFAA40;
}
.btnFloat:before {
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.4);
}
.btnFloat:hover:before {
margin-top: -2px;
margin-left: 0px;
transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, 0.25);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="You can get coached on anything. Always free.">
<title>Careless2Naysayers | Life Coaching by Pradeep Kumar P</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div>
<h1>CareLess2Naysayers</h1>
</div>
<div class="container">
Students
Teachers
Parents
</div>
</body>
</html>

How to keep div elements at bottom of page

I have a two-columned div element that I need to have at the bottom of the page to act as a footer. The problem is I have tried using position:fixed and bottom:0 to make the element appear at the bottom. This works but only brings one of the #column divs down to the bottom, the other disappears. I would appreciate any assistance.
Code:
/* ~ Copyright (c) Macleay Netball Association (made by Tom Carpenter for Year 11 IPT Assessment Task #2.) 2019. */
html>body {
background: none;
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
font-family: 'Trebuchet MS', sans-serif;
/* Trebuchet MS as main font throughout website, sans-serif acting as a backup */
}
#wrapper {
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
position: absolute;
background: #1B315E;
}
::-webkit-scrollbar {
display: none;
}
* {
box-sizing: border-box;
/* Alignment of DropDown Navigation Menu and Slideshow */
}
.navigation {
background: #444;
overflow: hidden;
top: 0;
}
.menuDropDown {
overflow: hidden;
float: left;
}
.menuDropDown>#menuButton {
font-size: 12px;
padding: 16px 16px;
/* Will result in final height of navigation */
margin: 0;
outline: none;
border: none;
font: inherit;
background: inherit;
color: #FFF;
}
#menuButton:hover,
.navigation>.menuDropDown:hover>#menuButton {
border: none;
outline: none;
background: #666;
color: #1B315E;
}
.menuDropDown:hover>.menuContent {
display: block;
}
.menuContent {
display: none;
position: absolute;
background: none;
width: 100%;
left: 0;
max-height: 85vh;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.menuRow:after {
display: table;
clear: both;
content: "";
}
.menuColumn {
width: 25%;
height: 100px;
overflow-y: auto;
padding: 5px;
float: left;
background: #666;
}
.menuColumn>a {
float: none;
display: block;
text-align: left;
text-decoration: none;
font-size: 14px;
padding: 8px;
color: #1B315E;
}
.menuColumn>a.current {
background: #777;
}
.menuColumn>a:hover {
background: #888;
}
.logo {
float: right;
padding-right: 10px;
width: 60px;
height: 50px;
}
.main {
width: 100%;
height: calc(100vh - 43px);
float: left;
background: none;
position: absolute;
overflow: auto;
padding: 8px;
}
.mainHeader {
color: #FFF;
text-align: center;
}
.mainImg {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.mainBody {
color: #FFF;
padding: 8px;
}
.row:after {
content: "";
clear: both;
display: table;
}
.column {
float: left;
width: 33.33%;
padding: 8px;
}
#column {
float: left;
width: 50%;
padding: 8px;
background: #888;
bottom: 0;
}
.sponsers {
float: left;
width: 20%;
padding: 8px;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.sponsers:hover {
-webkit-filter: grayscale(80%);
filter: grayscale(80%);
}
.slideshow {
/* Slideshow Container containing Images, Sliders and Captions */
position: relative;
margin: auto;
max-width: 1000px;
}
.slides {
display: none;
}
.slideshowImages {
width: 100%;
}
.slideButton {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background: #888;
color: #FFF;
border: none;
cursor: pointer;
padding: 16px 32px;
font-size: 18px;
text-align: center;
border-radius: 10px;
font-weight: bold;
}
.mnaHeader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.slideButton:hover {
background: #666;
}
.previous,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: #FFF;
font-weight: bold;
font-size: 18px;
transition: 0.3s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.previous:hover,
.next:hover {
background: rgba(0, 0, 0, 0.8);
}
table {
width: 100%;
font-size: 16px;
color: #FFF;
}
.tableCaption {
font-weight: bold;
font-size: 18px;
color: #33CC33;
}
table,
th,
td {
border-collapse: collapse;
border: 2px solid #888;
}
th,
td {
padding: 8px;
text-align: left;
}
#headerTable {
width: 33.33%;
background: #888;
font-size: 18px;
color: #33CC33;
}
.linkProp {
color: #FFF;
text-decoration: underline;
}
.newsPanel {
width: 100%;
background: #888;
height: 135px;
}
.imgNewsPreview {
width: 215px;
height: 135px;
padding: 4px;
float: left;
}
.newsHeaderPreview {
color: #FFF;
margin-top: 0px;
}
.newsBodyPreview {
color: #FFF;
margin-top: -12px;
}
.caption {
color: #33CC33;
text-align: center;
position: absolute;
font-size: 20px;
width: 100%;
padding: 8px 12px;
bottom: 16px;
}
.collapsible {
background: #888;
color: #FFF;
font-weight: bold;
width: 100%;
padding: 18px;
cursor: pointer;
font-size: 16px;
outline: none;
border: none;
text-align: left;
}
.active,
.collapsible:hover {
background: #666;
}
.collapsible:after {
content: '\002B';
color: #FFF;
font-weight: bold;
float: right;
margin-left: 4px;
}
.active:after {
content: '\2212';
}
.contentCollapsible {
padding: 0px 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background: #F8F8F8;
}
.fade {
-webkit-animation-name: fade;
/* To work on Safari (Apple) */
-webkit-animation-duration: 1s;
/* To work on Safari (Apple) */
animation-name: fade;
animation-duration: 1s;
}
.buttonReturn {
position: absolute;
margin-left: 20px;
margin-top: 20px;
background: #888;
color: #FFF;
border: none;
cursor: pointer;
font-size: 36px;
text-align: center;
border-radius: 50%;
font-weight: bold;
}
.videoProp {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
height: 400px;
}
#-webkit-keyframes fade {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
#media screen and (max-width: 600px) {
/* Stacks navigation menu acting for the site to be responsive */
.menuColumn {
width: 100%;
height: auto;
}
}
#media screen and (max-width: 800px) {
/* Stacks Image Header on Top - acting as responsive */
.column,
#column {
width: 100%;
}
}
#media screen and (max-width: 600px) {
/* Responsive Sponser Images */
.sponsers {
width: 33.33%;
}
}
#media screen and (max-width: 800px) {
/* Increases video resolution as screen reduces */
.videoProp {
width: 100%;
}
}
#media screen and (max-width: 600px) {
/* Reduces font-size as screen resolution lowers */
.newsBodyPreview {
font-size: 14px;
}
}
#media screen and (max-width: 300px) {
/* Reduces font-sizes within the slideshow <div> */
.previous,
.next,
.caption {
font-size: 14px;
}
}
<!DOCTYPE HTML>
<!--
~ Copyright (c) Macleay Netball Association (made by Tom Carpenter for Year 11 IPT Assessment Task #2.) 2019.
-->
<html lang="en-AU">
<head>
<title>Contact Us — Macleay Netball Association</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="../style.css" type="text/css">
<!-- Internal Stylesheet -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- External Font Stylesheet -->
<link rel="shortcut icon" href="../Assets/Img/mnaHeader.png">
<!-- Tab Browser Icon (Favicon) -->
</head>
<body>
<div id="wrapper">
<div class="navigation">
<div class="menuDropDown">
<button id="menuButton" title="Navigation Menu"><i class="fas fa-bars"></i> Menu</button>
<div class="menuContent">
<div class="menuRow">
<div class="menuColumn">
<a title="Home" href="../index.html"><i class="fas fa-home"></i> Home</a>
<a title="Association Contacts" href="contacts.html"><i class="fas fa-address-book"></i> Association Contacts</a>
</div>
<div class="menuColumn">
<a title="Weekly Draw" href="weekly-draw.html"><i class="fas fa-user-friends"></i> Weekly Draw</a>
<a title="News" href="#"><i class="far fa-newspaper"></i> News</a>
</div>
<div class="menuColumn">
<a title="Quick Links" href="links.html"><i class="fas fa-bookmark"></i> Quick Links</a>
<a title="Representative Teams" href="representative-teams.html"><i class="fas fa-certificate"></i> Representative Teams</a>
</div>
<div class="menuColumn">
<a title="Documentation" href="documentation.html"><i class="fas fa-file"></i> Documentation</a>
<a class="current" title="Contact Us" href="contact-us.html"><i class="fas fa-phone"></i> Contact Us</a>
</div>
</div>
</div>
</div>
<img src="../Assets/Img/mnaHeader.png" alt="Macleay Netball Association" title="Macleay Netball Association" class="logo">
<!-- Macleay Netball Association Main Logo -->
</div>
<!-- End of Navigation -->
<div class="main">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3417.0548484369647!2d152.83521681537312!3d-31.080401281517187!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b9ddf84d6da904b%3A0xfc941d1ded8f7a25!2sPam+Guyer+Netball+Centre!5e0!3m2!1sen!2sau!4v1559129788713!5m2!1sen!2sau"
width="100%" height="400px" frameborder="0" style="border:0" allowfullscreen></iframe>
<!-- Google Maps Embed -->
<br>
<div class="row">
<div id="column">1</div>
<div id="column">2</div>
</div>
<!-- End of Footer -->
</div>
<!-- End of Main -->
</div>
<!-- End of Wrapper -->
</body>
</html>
Attached are some images if I put position:fixed bottom:0 in the #column CSS Code. Only Column 2 goes down, 1 is hidden.

The best way to achieve this having responsiveness in mind and easier manipulation on different screen sizes is wrapping the two div elements in another div that you will position fixed on the bottom and then adjusting the two divs to take 50% of its parent. You've done half of this job by putting the divs into a .row wrapper.
The best solution would probably be using flex to adjust the divs in their parent wrapper like this:
Plus, you can not use the same id twice as it is in your example.
<div class="row">
<div>1</div>
<div>2</div>
</div>
<style>
.row {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
}
.row > div {
flex: 1;
}
</style>
Then on mobile devices you can just change the flex direction and the footer will become one-columned instead of two-columned. Like this:
<style>
#media only screen and (max-width: 768px) {
.row {
flex-direction: column;
}
}
</style>

Add an id to the element you want as a footer, remove the class and use the css below to style the element.
#footer {
clear: both;
}
<div id="footer">
<div id="column">1</div>
<div id="column">2</div>
</div> <!-- End of Footer -->

Both 1 and 2 are fixed to the bottom. Only the float: left has no effect here and they are at the exactly same position. The 2 is in front of 1 and latter is not visible behind 2
Do this instead.
<div class="row footer">
<div id="column">1</div>
<div id="column">2</div>
</div>
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
/* ~ Copyright (c) Macleay Netball Association (made by Tom Carpenter for Year 11 IPT Assessment Task #2.) 2019. */
html>body {
background: none;
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
font-family: 'Trebuchet MS', sans-serif;
/* Trebuchet MS as main font throughout website, sans-serif acting as a backup */
}
#wrapper {
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
position: absolute;
background: #1B315E;
}
::-webkit-scrollbar {
display: none;
}
* {
box-sizing: border-box;
/* Alignment of DropDown Navigation Menu and Slideshow */
}
.navigation {
background: #444;
overflow: hidden;
top: 0;
}
.menuDropDown {
overflow: hidden;
float: left;
}
.menuDropDown>#menuButton {
font-size: 12px;
padding: 16px 16px;
/* Will result in final height of navigation */
margin: 0;
outline: none;
border: none;
font: inherit;
background: inherit;
color: #FFF;
}
#menuButton:hover,
.navigation>.menuDropDown:hover>#menuButton {
border: none;
outline: none;
background: #666;
color: #1B315E;
}
.menuDropDown:hover>.menuContent {
display: block;
}
.menuContent {
display: none;
position: absolute;
background: none;
width: 100%;
left: 0;
max-height: 85vh;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.menuRow:after {
display: table;
clear: both;
content: "";
}
.menuColumn {
width: 25%;
height: 100px;
overflow-y: auto;
padding: 5px;
float: left;
background: #666;
}
.menuColumn>a {
float: none;
display: block;
text-align: left;
text-decoration: none;
font-size: 14px;
padding: 8px;
color: #1B315E;
}
.menuColumn>a.current {
background: #777;
}
.menuColumn>a:hover {
background: #888;
}
.logo {
float: right;
padding-right: 10px;
width: 60px;
height: 50px;
}
.main {
width: 100%;
height: calc(100vh - 43px);
float: left;
background: none;
position: absolute;
overflow: auto;
padding: 8px;
}
.mainHeader {
color: #FFF;
text-align: center;
}
.mainImg {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.mainBody {
color: #FFF;
padding: 8px;
}
.row:after {
content: "";
clear: both;
display: table;
}
.column {
float: left;
width: 33.33%;
padding: 8px;
}
#column {
float: left;
width: 50%;
padding: 8px;
background: #888;
bottom: 0;
}
.sponsers {
float: left;
width: 20%;
padding: 8px;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.sponsers:hover {
-webkit-filter: grayscale(80%);
filter: grayscale(80%);
}
.slideshow {
/* Slideshow Container containing Images, Sliders and Captions */
position: relative;
margin: auto;
max-width: 1000px;
}
.slides {
display: none;
}
.slideshowImages {
width: 100%;
}
.slideButton {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background: #888;
color: #FFF;
border: none;
cursor: pointer;
padding: 16px 32px;
font-size: 18px;
text-align: center;
border-radius: 10px;
font-weight: bold;
}
.mnaHeader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.slideButton:hover {
background: #666;
}
.previous,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: #FFF;
font-weight: bold;
font-size: 18px;
transition: 0.3s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.previous:hover,
.next:hover {
background: rgba(0, 0, 0, 0.8);
}
table {
width: 100%;
font-size: 16px;
color: #FFF;
}
.tableCaption {
font-weight: bold;
font-size: 18px;
color: #33CC33;
}
table,
th,
td {
border-collapse: collapse;
border: 2px solid #888;
}
th,
td {
padding: 8px;
text-align: left;
}
#headerTable {
width: 33.33%;
background: #888;
font-size: 18px;
color: #33CC33;
}
.linkProp {
color: #FFF;
text-decoration: underline;
}
.newsPanel {
width: 100%;
background: #888;
height: 135px;
}
.imgNewsPreview {
width: 215px;
height: 135px;
padding: 4px;
float: left;
}
.newsHeaderPreview {
color: #FFF;
margin-top: 0px;
}
.newsBodyPreview {
color: #FFF;
margin-top: -12px;
}
.caption {
color: #33CC33;
text-align: center;
position: absolute;
font-size: 20px;
width: 100%;
padding: 8px 12px;
bottom: 16px;
}
.collapsible {
background: #888;
color: #FFF;
font-weight: bold;
width: 100%;
padding: 18px;
cursor: pointer;
font-size: 16px;
outline: none;
border: none;
text-align: left;
}
.active,
.collapsible:hover {
background: #666;
}
.collapsible:after {
content: '\002B';
color: #FFF;
font-weight: bold;
float: right;
margin-left: 4px;
}
.active:after {
content: '\2212';
}
.contentCollapsible {
padding: 0px 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background: #F8F8F8;
}
.fade {
-webkit-animation-name: fade;
/* To work on Safari (Apple) */
-webkit-animation-duration: 1s;
/* To work on Safari (Apple) */
animation-name: fade;
animation-duration: 1s;
}
.buttonReturn {
position: absolute;
margin-left: 20px;
margin-top: 20px;
background: #888;
color: #FFF;
border: none;
cursor: pointer;
font-size: 36px;
text-align: center;
border-radius: 50%;
font-weight: bold;
}
.videoProp {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
height: 400px;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
#-webkit-keyframes fade {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
#media screen and (max-width: 600px) {
/* Stacks navigation menu acting for the site to be responsive */
.menuColumn {
width: 100%;
height: auto;
}
}
#media screen and (max-width: 800px) {
/* Stacks Image Header on Top - acting as responsive */
.column,
#column {
width: 100%;
}
}
#media screen and (max-width: 600px) {
/* Responsive Sponser Images */
.sponsers {
width: 33.33%;
}
}
#media screen and (max-width: 800px) {
/* Increases video resolution as screen reduces */
.videoProp {
width: 100%;
}
}
#media screen and (max-width: 600px) {
/* Reduces font-size as screen resolution lowers */
.newsBodyPreview {
font-size: 14px;
}
}
#media screen and (max-width: 300px) {
/* Reduces font-sizes within the slideshow <div> */
.previous,
.next,
.caption {
font-size: 14px;
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div id="wrapper">
<div class="navigation">
<div class="menuDropDown">
<button id="menuButton" title="Navigation Menu"><i class="fas fa-bars"></i> Menu</button>
<div class="menuContent">
<div class="menuRow">
<div class="menuColumn">
<a title="Home" href="../index.html"><i class="fas fa-home"></i> Home</a>
<a title="Association Contacts" href="contacts.html"><i class="fas fa-address-book"></i> Association Contacts</a>
</div>
<div class="menuColumn">
<a title="Weekly Draw" href="weekly-draw.html"><i class="fas fa-user-friends"></i> Weekly Draw</a>
<a title="News" href="#"><i class="far fa-newspaper"></i> News</a>
</div>
<div class="menuColumn">
<a title="Quick Links" href="links.html"><i class="fas fa-bookmark"></i> Quick Links</a>
<a title="Representative Teams" href="representative-teams.html"><i class="fas fa-certificate"></i> Representative Teams</a>
</div>
<div class="menuColumn">
<a title="Documentation" href="documentation.html"><i class="fas fa-file"></i> Documentation</a>
<a class="current" title="Contact Us" href="contact-us.html"><i class="fas fa-phone"></i> Contact Us</a>
</div>
</div>
</div>
</div>
<img src="../Assets/Img/mnaHeader.png" alt="Macleay Netball Association" title="Macleay Netball Association" class="logo">
<!-- Macleay Netball Association Main Logo -->
</div>
<!-- End of Navigation -->
<div class="main">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3417.0548484369647!2d152.83521681537312!3d-31.080401281517187!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b9ddf84d6da904b%3A0xfc941d1ded8f7a25!2sPam+Guyer+Netball+Centre!5e0!3m2!1sen!2sau!4v1559129788713!5m2!1sen!2sau"
width="100%" height="400px" frameborder="0" style="border:0" allowfullscreen></iframe>
<!-- Google Maps Embed -->
<br>
<div class="row footer">
<div id="column">1</div>
<div id="column">2</div>
</div>
<!-- End of Footer -->
</div>
<!-- End of Main -->
</div>
<!-- End of Wrapper -->

First of all id must be unique for an element, shouldn't set same id on two elements.
When you set position fixed on an element it is positioned relative to viewport, not relative to flow of the page.
Both of your elements have bottom: 0, which is relative to browser window, that's why your first element is covered by the second one (it's not hidden). You can group them in the same parent and position the parent, so your elements are stacked as expected. Take a look at the following code:
body {
min-height: 200vh;
}
#column {
display: block;
padding 15px;
width: 100%;
position: fixed;
bottom: 0;
background: #e5e5e5;
}
#column div {
display: block;
padding: 10px;
width: 100%;
background: #9b009b;
color: #fff;
margin-bottom: 10px;
}
<div id="column">
<div>first col</div>
<div>second col</div>
</div>

Can't get <ul> to display on :hover of another <li>

I'm trying to get the ul with the id #cloudmenu (line 51 in html) to display when I hover over the li with the id #cloud (line 50 in html). The CSS I wrote is in line 96-103 of the CSS.
What I'm trying to archieve specifically is that I want change display: none; of the #cloudmenu ul to display: grid; when I hover over the #cloud li
For some reason #cloud:hover #cloudmenu doesn't work like I thought it would...
/*--------STYLE.CSS--------*/
#import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:300,500,700');
* {
margin: 0;
padding: 0;
border: 0;
}
html {
height: 100%;
}
body {
height: 100%;
background: #424949;
color: #f5f5f5;
font-family: 'Alegreya Sans', sans-serif;
margin: 0;
overflow: hidden;
}
h2 {
font-size: 250%;
font-weight: 700;
text-align: center;
padding-top: 2%;
}
p {
font-size: 160%;
font-weight: 500;
line-height: 150%;
padding: 10px;
/*3%*/
text-indent: 20px;
/*2%*/
text-align: justify;
}
img {
height: auto;
width: auto;
}
header {
background-color: #1a1a1a;
width: 100%;
height: 86px;
}
#header-inner {
max-width: 1200px;
margin: 0 auto;
}
#logo {
margin: 0 0 0 20px;
padding: 0 10px 0 10px;
/*top right bottom left*/
float: left;
width: 86px;
height: 86px;
background: url(https://slothy.cloud/img/logohead.svg) no-repeat center;
}
#logo:hover {
transition: all .1s linear;
transform: translateY(-4px);
}
nav {
float: right;
padding: 4px 20px 0 0;
height: 82px;
}
#menu-icon {
display: none;
}
#menu-icon i {
font-size: 240%;
color: #f5f5f5;
padding: 15px 20px 15px 20px;
margin: 0 6px 0 0;
}
#menu-icon i:hover {
color: #616a6b;
}
ul {
list-style-type: none;
}
nav ul li {
font-family: 'Alegreya Sans', sans-serif;
font-size: 150%;
display: inline-block;
float: left;
margin-top: -5px;
}
nav ul li a {
color: #f5f5f5;
text-decoration: none;
padding: 37px 25px 22px 25px;
display: inline-block;
}
a:hover#home,
a#homecurrent {
color: #f5f5f5;
background: #616a6b;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #424949;
}
a:hover#cloud,
a#cloudcurrent {
color: #f5f5f5;
background: #3498db;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #2874a6;
}
a:hover#paste,
a#pastecurrent {
color: #f5f5f5;
background: #2ecc71;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #239b56;
}
a:hover#uptime,
a#uptimecurrent {
color: #f5f5f5;
background: #e74c3c;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #b03a2e;
}
a:hover#contact,
a#contactcurrent {
color: #f5f5f5;
background: #f1c40f;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #b7950b;
}
#cloudmenu {
display: none;
position: relative;
background: #1a1a1a;
}
#cloud:hover #cloudmenu {
display: grid;
}
.container {
overflow: hidden;
width: 100%;
height: calc(100% - 86px - 69px);
background-color: #303030;
}
.container img {
height: 100%;
width: 100%;
object-fit: cover;
pointer-events: none;
}
.container video {
height: 100%;
width: 100%;
object-fit: cover;
pointer-events: none;
}
.container-inner {
height: 100%;
max-width: 1100px;
margin: 0 auto;
}
footer {
background: #1a1a1a;
width: 100%;
}
.social {
list-style-type: none;
text-align: center;
}
.social li {
display: inline;
margin: 0px -3px;
}
.social i {
font-size: 260%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 7%;
padding-right: 7%;
color: #616a6b
}
.social i:hover {
color: #f5f5f5;
transition: all .1s linear;
transform: translateY(-6px);
}
/*--------SMARTPHONE--------*/
#media screen and (max-width: 768px) {
h2 {
font-size: 150%;
}
header {
z-index: +10;
position: absolute;
height: 66px;
}
#logo {
margin: 0 0 0 10px;
height: 66px;
width: 66px;
}
#menu-icon {
display: inline-block;
}
nav {
padding: 0px;
height: 66px;
}
nav ul,
nav:active ul {
display: none;
z-index: -1;
position: absolute;
padding: 26px 20px 10px 20px;
background: #1a1a1a;
right: 0px;
top: 45px;
border-radius: 0 0 0 15px;
width: 40%;
}
nav:hover ul {
display: block;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0 10px 0;
}
nav ul li a {
color: #f5f5f5;
text-decoration: none;
padding: 15px 46px 15px 46px;
}
.container {
padding-top: 66px;
height: calc(100% - 66px - 56px);
}
.container video {
display: none;
}
.social li {
margin: 0px;
}
.social i {
font-size: 240%;
padding-top: 10px;
padding-bottom: 10px;
}
}
<!-- Home page of slothy.cloud -->
<!DOCTYPE html>
<html>
<!--
My small cozy website.
© veryslothysloth 2018
-->
<head>
<!-- Links -->
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#2e86c1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<!-- Open Graph Protocol -->
<meta property="og:url" content="https://slothy.cloud">
<meta property="og:type" content="website">
<meta property="og:title" content="slothy.cloud | by veryslothysloth">
<meta property="og:description" content="A small slothy website.">
<meta property="og:image" content="https://slothy.cloud/img/slothyicon.png">
<!-- Twitter card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="slothy.cloud |by veryslothysloth">
<meta name="twitter:description" content="A small slothy website.">
<meta name="twitter:image" content="https://slothy.cloud/img/slothyicon.png">
<!-- Data -->
<title>slothy.cloud | by veryslothysloth</title>
<meta charset="utf-8">
<meta name="description" content="A small slothy website.">
<meta name="keywords" content="sloth,slothy,veryslothysloth,file,upload,hosting,lolisafe">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#616a6b">
</head>
<body>
<header>
<!-- Header -->
<div id="header-inner">
<nav>
<i class="fas fa-bars"></i>
<ul>
<li>Home</li>
<li>Cloud
<ul id="cloudmenu">
<li>Frontpage</li>
<li>Dashboard</li>
<li>FAQ</li>
<li>On Github</li>
</ul>
</li>
<li>Paste</li>
<li>Uptime</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<!-- Main Body -->
<div class="container" id="container">
<video autoplay muted loop src="" id="backgroundVid" type="video/mp4" alt="Background_Video" media="min-width: 768px"></video>
<img src="" id="backgroundImg" type="image/jpg" alt="Background_Image">
<!-- Random Background Script -->
<script>
var backgrounds = ['alley0', 'alley1', 'neonsigns0', 'neonsigns1', 'shrine0']
var background = backgrounds[Math.floor(Math.random() * backgrounds.length)];
document.getElementById('backgroundVid').src = 'img/background/' + background + '.mp4';
document.getElementById('backgroundImg').src = 'img/background/' + background + '.jpg';
</script>
<!--<div class="container-inner">
<p>Test Text</p>
</div>-->
</div>
<!-- Footer -->
<footer>
<ul class="social">
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-steam"></i></li>
<li><i class="fab fa-github"></i></li>
<!--<li><i class="fas fa-at"></i></li>-->
</ul>
</footer>
</body>
</html>
Thanks in advance for the help!

Your current selector is selecting a #cloudmenu nested inside a #cloud element which is not how your HTML is structured. BTW, #cloud is an a not the parent li (you said "when I hover over the #cloud li" ... there is no "#cloud li").
Your need a CSS sibling selector ~ or +.
#cloud:hover ~ #cloudmenu {
display: grid;
}
Also, try setting your #cloudmenu to position: absolute; so it doesn't flicker.
#cloudmenu {
display: none;
position: absolute;
background: #1a1a1a;
}
Here is a fiddle (with a larger viewport): https://jsfiddle.net/qL3Ldpad/
/*--------STYLE.CSS--------*/
#import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:300,500,700');
* {
margin: 0;
padding: 0;
border: 0;
}
html {
height: 100%;
}
body {
height: 100%;
background: #424949;
color: #f5f5f5;
font-family: 'Alegreya Sans', sans-serif;
margin: 0;
overflow: hidden;
}
h2 {
font-size: 250%;
font-weight: 700;
text-align: center;
padding-top: 2%;
}
p {
font-size: 160%;
font-weight: 500;
line-height: 150%;
padding: 10px;
/*3%*/
text-indent: 20px;
/*2%*/
text-align: justify;
}
img {
height: auto;
width: auto;
}
header {
background-color: #1a1a1a;
width: 100%;
height: 86px;
}
#header-inner {
max-width: 1200px;
margin: 0 auto;
}
#logo {
margin: 0 0 0 20px;
padding: 0 10px 0 10px;
/*top right bottom left*/
float: left;
width: 86px;
height: 86px;
background: url(https://slothy.cloud/img/logohead.svg) no-repeat center;
}
#logo:hover {
transition: all .1s linear;
transform: translateY(-4px);
}
nav {
float: right;
padding: 4px 20px 0 0;
height: 82px;
}
#menu-icon {
display: none;
}
#menu-icon i {
font-size: 240%;
color: #f5f5f5;
padding: 15px 20px 15px 20px;
margin: 0 6px 0 0;
}
#menu-icon i:hover {
color: #616a6b;
}
ul {
list-style-type: none;
}
nav ul li {
font-family: 'Alegreya Sans', sans-serif;
font-size: 150%;
display: inline-block;
float: left;
margin-top: -5px;
}
nav ul li a {
color: #f5f5f5;
text-decoration: none;
padding: 37px 25px 22px 25px;
display: inline-block;
}
a:hover#home,
a#homecurrent {
color: #f5f5f5;
background: #616a6b;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #424949;
}
a:hover#cloud,
a#cloudcurrent {
color: #f5f5f5;
background: #3498db;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #2874a6;
}
a:hover#paste,
a#pastecurrent {
color: #f5f5f5;
background: #2ecc71;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #239b56;
}
a:hover#uptime,
a#uptimecurrent {
color: #f5f5f5;
background: #e74c3c;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #b03a2e;
}
a:hover#contact,
a#contactcurrent {
color: #f5f5f5;
background: #f1c40f;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #b7950b;
}
#cloudmenu {
display: none;
position: absolute;
background: #1a1a1a;
}
#cloud:hover ~ #cloudmenu {
display: grid;
}
.container {
overflow: hidden;
width: 100%;
height: calc(100% - 86px - 69px);
background-color: #303030;
}
.container img {
height: 100%;
width: 100%;
object-fit: cover;
pointer-events: none;
}
.container video {
height: 100%;
width: 100%;
object-fit: cover;
pointer-events: none;
}
.container-inner {
height: 100%;
max-width: 1100px;
margin: 0 auto;
}
footer {
background: #1a1a1a;
width: 100%;
}
.social {
list-style-type: none;
text-align: center;
}
.social li {
display: inline;
margin: 0px -3px;
}
.social i {
font-size: 260%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 7%;
padding-right: 7%;
color: #616a6b
}
.social i:hover {
color: #f5f5f5;
transition: all .1s linear;
transform: translateY(-6px);
}
/*--------SMARTPHONE--------*/
#media screen and (max-width: 768px) {
h2 {
font-size: 150%;
}
header {
z-index: +10;
position: absolute;
height: 66px;
}
#logo {
margin: 0 0 0 10px;
height: 66px;
width: 66px;
}
#menu-icon {
display: inline-block;
}
nav {
padding: 0px;
height: 66px;
}
nav ul,
nav:active ul {
display: none;
z-index: -1;
position: absolute;
padding: 26px 20px 10px 20px;
background: #1a1a1a;
right: 0px;
top: 45px;
border-radius: 0 0 0 15px;
width: 40%;
}
nav:hover ul {
display: block;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0 10px 0;
}
nav ul li a {
color: #f5f5f5;
text-decoration: none;
padding: 15px 46px 15px 46px;
}
.container {
padding-top: 66px;
height: calc(100% - 66px - 56px);
}
.container video {
display: none;
}
.social li {
margin: 0px;
}
.social i {
font-size: 240%;
padding-top: 10px;
padding-bottom: 10px;
}
}
<!-- Home page of slothy.cloud -->
<!DOCTYPE html>
<html>
<!--
My small cozy website.
© veryslothysloth 2018
-->
<head>
<!-- Links -->
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#2e86c1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<!-- Open Graph Protocol -->
<meta property="og:url" content="https://slothy.cloud">
<meta property="og:type" content="website">
<meta property="og:title" content="slothy.cloud | by veryslothysloth">
<meta property="og:description" content="A small slothy website.">
<meta property="og:image" content="https://slothy.cloud/img/slothyicon.png">
<!-- Twitter card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="slothy.cloud |by veryslothysloth">
<meta name="twitter:description" content="A small slothy website.">
<meta name="twitter:image" content="https://slothy.cloud/img/slothyicon.png">
<!-- Data -->
<title>slothy.cloud | by veryslothysloth</title>
<meta charset="utf-8">
<meta name="description" content="A small slothy website.">
<meta name="keywords" content="sloth,slothy,veryslothysloth,file,upload,hosting,lolisafe">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#616a6b">
</head>
<body>
<header>
<!-- Header -->
<div id="header-inner">
<nav>
<i class="fas fa-bars"></i>
<ul>
<li>Home</li>
<li>Cloud
<ul id="cloudmenu">
<li>Frontpage</li>
<li>Dashboard</li>
<li>FAQ</li>
<li>On Github</li>
</ul>
</li>
<li>Paste</li>
<li>Uptime</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<!-- Main Body -->
<div class="container" id="container">
<video autoplay muted loop src="" id="backgroundVid" type="video/mp4" alt="Background_Video" media="min-width: 768px"></video>
<img src="" id="backgroundImg" type="image/jpg" alt="Background_Image">
<!-- Random Background Script -->
<script>
var backgrounds = ['alley0', 'alley1', 'neonsigns0', 'neonsigns1', 'shrine0']
var background = backgrounds[Math.floor(Math.random() * backgrounds.length)];
document.getElementById('backgroundVid').src = 'img/background/' + background + '.mp4';
document.getElementById('backgroundImg').src = 'img/background/' + background + '.jpg';
</script>
<!--<div class="container-inner">
<p>Test Text</p>
</div>-->
</div>
<!-- Footer -->
<footer>
<ul class="social">
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-steam"></i></li>
<li><i class="fab fa-github"></i></li>
<!--<li><i class="fas fa-at"></i></li>-->
</ul>
</footer>
</body>
</html>

Because your #cloudmenu is not a child of #cloud, but a sibling, a sibling combinator is required (+ or ~):
#cloud:hover ~ #cloudmenu {
position: absolute;
display: grid;
}
JSFiddle demo

/*--------STYLE.CSS--------*/
#import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:300,500,700');
* {
margin: 0;
padding: 0;
border: 0;
}
html {
height: 100%;
}
body {
height: 100%;
background: #424949;
color: #f5f5f5;
font-family: 'Alegreya Sans', sans-serif;
margin: 0;
overflow: hidden;
}
h2 {
font-size: 250%;
font-weight: 700;
text-align: center;
padding-top: 2%;
}
p {
font-size: 160%;
font-weight: 500;
line-height: 150%;
padding: 10px;
/*3%*/
text-indent: 20px;
/*2%*/
text-align: justify;
}
img {
height: auto;
width: auto;
}
header {
background-color: #1a1a1a;
width: 100%;
height: 86px;
}
#header-inner {
max-width: 1200px;
margin: 0 auto;
}
#logo {
margin: 0 0 0 20px;
padding: 0 10px 0 10px;
/*top right bottom left*/
float: left;
width: 86px;
height: 86px;
background: url(https://slothy.cloud/img/logohead.svg) no-repeat center;
}
#logo:hover {
transition: all .1s linear;
transform: translateY(-4px);
}
nav {
float: right;
padding: 4px 20px 0 0;
height: 82px;
}
#menu-icon {
display: none;
}
#menu-icon i {
font-size: 240%;
color: #f5f5f5;
padding: 15px 20px 15px 20px;
margin: 0 6px 0 0;
}
#menu-icon i:hover {
color: #616a6b;
}
ul {
list-style-type: none;
}
nav ul li {
font-family: 'Alegreya Sans', sans-serif;
font-size: 150%;
display: inline-block;
float: left;
margin-top: -5px;
}
nav ul li a {
color: #f5f5f5;
text-decoration: none;
padding: 37px 25px 22px 25px;
display: inline-block;
}
a:hover#home,
a#homecurrent {
color: #f5f5f5;
background: #616a6b;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #424949;
}
li:hover#cloud,
a#cloudcurrent {
color: #f5f5f5;
background: #3498db;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #2874a6;
}
a:hover#paste,
a#pastecurrent {
color: #f5f5f5;
background: #2ecc71;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #239b56;
}
a:hover#uptime,
a#uptimecurrent {
color: #f5f5f5;
background: #e74c3c;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #b03a2e;
}
a:hover#contact,
a#contactcurrent {
color: #f5f5f5;
background: #f1c40f;
transition: all .1s linear;
transform: translateY(-6px);
box-shadow: 0 6px 0 #b7950b;
}
#cloudmenu {
display: none;
position: absolute;
background: #1a1a1a;
}
#cloud:hover #cloudmenu {
display: grid;
}
.container {
overflow: hidden;
width: 100%;
height: calc(100% - 86px - 69px);
background-color: #303030;
}
.container img {
height: 100%;
width: 100%;
object-fit: cover;
pointer-events: none;
}
.container video {
height: 100%;
width: 100%;
object-fit: cover;
pointer-events: none;
}
.container-inner {
height: 100%;
max-width: 1100px;
margin: 0 auto;
}
footer {
background: #1a1a1a;
width: 100%;
}
.social {
list-style-type: none;
text-align: center;
}
.social li {
display: inline;
margin: 0px -3px;
}
.social i {
font-size: 260%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 7%;
padding-right: 7%;
color: #616a6b
}
.social i:hover {
color: #f5f5f5;
transition: all .1s linear;
transform: translateY(-6px);
}
/*--------SMARTPHONE--------*/
#media screen and (max-width: 768px) {
h2 {
font-size: 150%;
}
header {
z-index: +10;
position: absolute;
height: 66px;
}
#logo {
margin: 0 0 0 10px;
height: 66px;
width: 66px;
}
#menu-icon {
display: inline-block;
}
nav {
padding: 0px;
height: 66px;
}
nav ul,
nav:active ul {
display: none;
z-index: -1;
position: absolute;
padding: 26px 20px 10px 20px;
background: #1a1a1a;
right: 0px;
top: 45px;
border-radius: 0 0 0 15px;
width: 40%;
}
nav:hover ul {
display: block;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0 10px 0;
}
nav ul li a {
color: #f5f5f5;
text-decoration: none;
padding: 15px 46px 15px 46px;
}
.container {
padding-top: 66px;
height: calc(100% - 66px - 56px);
}
.container video {
display: none;
}
.social li {
margin: 0px;
}
.social i {
font-size: 240%;
padding-top: 10px;
padding-bottom: 10px;
}
}
<header>
<!-- Header -->
<div id="header-inner">
<nav>
<i class="fas fa-bars"></i>
<ul>
<li>Home</li>
<li id="cloud"><a href="https://safe.slothy.cloud/" >Cloud</a>
<ul id="cloudmenu">
<li>Frontpage</li>
<li>Dashboard</li>
<li>FAQ</li>
<li>On Github</li>
</ul>
</li>
<li>Paste</li>
<li>Uptime</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Can someone help to turn this sidebar into hamburger base on ratio? - html

Related

Issues with mobile nav

Vertical Hamburger side navigation bar is creating a blank space on the right side of the screen. Shown only in mobile version

Text between the anchor tags on a button is not getting displayed

How to keep div elements at bottom of page

Can't get <ul> to display on :hover of another <li>

Categories

Resources