I might be missing something blatantly obvious but for some reason, I cannot get my dropdown nav menu to center underneath my flavors button without it dragging the entire header down with it. I'm not sure how to proceed, it's not a major issue as it's nothing that's going to take away from what I'm trying to display but it would be a lot cleaner if it wouldn't do what it's doing.
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-image: url("https://i.imgur.com/dxqafWb.png");
background-repeat: repeat;
background-size: auto;
background-blend-mode: soft-light;
background-color: #AAAAAA;
}
.navbar a {
font-size: 16px;
color: #330300;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: #330300;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: darkgray;
}
.dropdown-content {
display: none;
position: relative;
background-image: url("https://i.imgur.com/dxqafWb.png");
background-position: center;
background-repeat: repeat;
background-size: auto;
background-blend-mode: soft-light;
background-color: #AAAAAA;
min-width: 160px;
max-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: #330300;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover {
background-color: darkgray;
}
.dropdown:hover .dropdown-content {
display: block;
}
.logo {
max-width: 50%;
height: auto;
float: none;
text-align-last: center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>VapeJoose</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<center>
<header class="header">
<div class="navbar">
<div class="logo">
<img src="css/img/logo.png" class="logo">
</div>
Home
About Me
Contact Me
Order Search (Coming Soon)
<div class="dropdown">
<button class="dropbtn">Flavors
</button>
<div class="dropdown-content">
Fruit Flavors
Desert Flavors
Cereal Flavors
Candy Flavors
Beverages Flavors
Menthol Flavors
Tobacco Flavors
</div>
</div>
</div>
</header>
<!-- ^ header ^ -->
</center>
<p>test</p>
</body>
<footer>
</footer>
</html>
.dropdown-content have position: relative. Make it absolute and if you want to center it relative to .dropdown you need also add this:
.dropdown {
position: relative;
}
.dropdown-content {
left: 50%;
transform: translateX(-50%);
}
And don't forget to remove overflow: hidden from parents of .dropdown-content, else your .dropdown-content block would be hidden.
Related
This is my HTML and CSS code I want to make the navigation bar responsive but the media query doesn't cooperate It doesn't make any difference. and #menu doesn't make any difference in the first place(display: none doesn't work) it also doesn't work under media query. I can't figure out why, please help me.
.header .icons a {
cursor: pointer;
font-size: 2.5rem;
color: #333;
margin-left: 1.5rem;
}
header .icons a:hover {
color: black;
}
#menu {
display: none;
}
#media(max-width:991px) {
html {
font-size: 55%;
}
.header {
padding: 1.5rem 2rem;
}
}
#media(max-width:768px) {
#menu {
display: inline-block;
}
.header .navbar {
position: absolute;
top: 100px;
right: 0;
background-color: black;
width: 30rem;
height: calc(100vh - 9.5rem);
}
.header .navbar a {
color: white;
display: block;
margin: 1.5rem;
padding: .5rem;
font-size: 2rem;
}
}
<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">
<title>jj </title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.1.2/css/all.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header class="header" >
<a href="#" class="logo">
<img src="images/logo.jpg" alt=""></a>
<nav class="navbar">
home
varieties
about us
contact us
</nav>
<div class="icons">
</div>
Add a head element with a meta tag at the beginning of your code so the website is properly rendered based on actual lower screen sizes (without this, websites tend to render in higher resolution sizes than the device actually is).
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
I also cannot find where your header class is used in your html code so I got rid of most of the .header portions in your media queries to have the styling take effect.
#media(max-width:991px){
html{
font-size: 55%;
}
.header{
padding: 1.5rem 2rem;
}
}
#media(max-width:768px){
#menu {
display: inline-block;
}
.navbar{
position: absolute;
top:100px; right: 0;
background-color:#333;
width: 30rem;
height: calc(100vh - 9.5rem);
}
.navbar a{
color:rgb(243, 215, 215);
display: block;
margin:1.5rem;
padding:.5rem;
font-size:2rem;
}
}
Basicly just exchange your nav with this template and it should work perfectly.
#media(max-width:991px) {
html {
font-size: 55%;
}
.header {
padding: 1.5rem 2rem;
}
}
#media(max-width:768px) {
.topnav {
display: inline-block;
}
}
.topnav {
background-color: gray;
overflow: hidden;
margin: 1px;
border-radius: 10px;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 30px 16px;
text-decoration: none;
font-size: 20px;
}
.topnav a:hover {
background-color: light-gray;
color: red;
transition: 1s;
}
.topnav a.active {
background-color: red;
color: white;
border-radius: 10px;
}
<div class="topnav">
home
varieties
about us
contact us
</div>
There is this W3schools example of dropdown in the top navigation bar. In the CSS section of the code, the navbar has property overflow set to hidden. In the HTML section of the code, the dropdown section is a part of the navbar section.
Now as I hover over the dropdown button, the dropdown-content(hidden section) becomes visible(changed the property, display, from none to block) and there is an overflow as the dropdown-content overflows from the navbar section (I even checked using inspect elements the height of the navbar does not change when the dropdown-content is visible).
Now the question is since the overflow property of navbar is hidden, why is the dropdown-content is visible( it is an overflow)? And why the height of navbar not changing (height of navbar is not specified in the styling) and an additional division of significant height got added into it?
Here is the code from the example:
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
display: block;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
Well a few things, the .down-content class is set to position: absolute; which essentially ignores overflow: hidden; as well as the height of the navbar and essentially most other things. Also the navbar does not have a specified height so there really isn't anything limiting it's size.
In this example below I removed position: absolute; from the .down-content class and also added a height of 75px to the .navbar class. Check it out
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
}
.navbar {
overflow: hidden;
background-color: #333;
height: 75px;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
display: block;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
The dropdown is not considered overflow here. Overflow occurs when the content of an element is too big to fit its specified area. The nav bar does not have a fixed height - the height is determined by its content (including padding). Therefore the dropdown does not "overflow", as the navbar is "flexible" so to speak.
I've been trying to make my nav (including the "works" dropdown button) responsive by making them appear through the usual three parallel lines on the top right margin that would then display what I've written on the nav bar when clicked from a mobile.
I've been trying for about two hours without a decent result.
I'm pretty sure it's not the hardest thing but I can't seem to get it right. Would love to understand how it works. Here's the desktop size, non-responsive navbar.
Here's the html:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AURORA CATERA -- 2020 ALL RIGHT RESERVED</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="css/font-awesome.min.css" rel="stylesheet"/>
<link rel='icon' href='FAVICON.jpg' type='image/x-icon'/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<img src="img/AURORA-YLOW-FIN.png" alt="logo"></div>
<div class="menu">
<ul>
<li>ALL</li>
<div class="dropdown">
<button class="dropbtn">STUFF ▾</button>
<div class="dropdown-content">
PHOTOS
VIDEOS
POSTERS
</div>
</div>
<li>ABOUT</li>
<li>CONTACT</li>
<li><i class="fa fa-instagram"></li></i>
</ul>
</div>
</body>
</html>
and here is the CSS:
.wrapper{
width: 100%;
}
body{
margin: 0;
padding: 0;
background-color: black;
}
.header{
padding: 5px 0px;
display: inline-block;
width: 100%;
}
.header img{
max-height: 400px;
max-width: 550px;
margin-left: 60px;
margin-top: 30px;
}
.menu{
float: right;
position: relative;
display: inline-block;
top: -85px;
left: 0px;
margin-right: 70px;
}
.menu ul li{
display: inline-block;
float: left;
line-height: 28px;
margin-top: 10px;
}
.menu ul li a{
text-decoration: none;
color:#F8E315;
font-family: Rajdhani, "sanf serif";
font-size: 15px;
padding: 5px 10px;
}
.menu ul li a:hover{
color:#C7C7C7;
}
.dropbtn {
background-color: black;
color: #F8E315;
padding: 14px;
font-family: Rajdhani, "sans-serif";
font-size: 15px;
border: none;
}
.dropbtn:hover{
color: #c7c7c7;
}
.dropdown {
position: relative;
display: inline-block;
float: left;
}
.dropdown-content {
display: none;
position: absolute;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: #F8E315;
font-family: Rajdhani, "sans-serif";
font-size: 15px;
padding: 5px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: black;
color: #c7c7c7;
}
.dropdown:hover .dropdown-content {
display: block;
}
A basic burger-menu can be achieved by doing the following steps:
1) Create a with the class of burger-menu as a previous sibling element of the navigation you want to hide on mobile screen width.
a) You dont want this to show on your desktop medias, so in the css, style it as display: none;
2) Create a media query for the desired device. Let's say 480px for a mobile device.
3) Within this media query, style the navigation that you want to appear on hover (or click) as display: none;
4) Within this media query, style your burger-menu. In my example, I've styled something very basic, for time reasons, but you can research using spans to make a responsive burger menu.
5) Within this media query, declare an on hover pseudo-class for your burger-menu which accesses the hidden navigation. Since you placed the burger-menu as a the previous sibling element of your navigation, you can use the + css rule to target it like so
.burger-menu:hover + .menu {
}
This means that, when you hover over the burger-menu, you will affect the css of .menu. You can place how .menu's styles will be affected in the above CSS selector.
Here is a basic example of how this process works with your code.
Add this to your html, before your .menu <div>
<div class="burger-menu"></div>
<div class="menu">
Add this to your css file, at the bottom
.burger-menu {
display: none;
}
#media (max-width: 480px) {
.menu {
display: none;
}
.burger-menu {
display: block;
background-color: white;
height: 30px;
width: 30px;
position: fixed;
top: 10px;
right: 10px;
}
.burger-menu:hover + .menu {
display: block;
}
}
Typically, you would advance this by using toggleClass with JQuery to add and remove display to your navigation menu on clicking the burger menu.
P.s the benefit of using spans to create your burger-menu will be when you want it to have nice animation, changing from a burger menu to a cross, or arrow, etc.
here is a solution with a responsive menu list. Now you should add this menu list to your project.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
}
.menu li{
display: inline-block;
float: left;
line-height: 28px;
margin-top: 10px;
}
.topnav a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a, li {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
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;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
ALL
<div class="dropdown">
<button class="dropbtn">STUFF ▾</button>
<div class="dropdown-content">
PHOTOS
VIDEOS
POSTERS
</div>
</div>
ABOUT
CONTACT
<a href="https://www.instagram.com/auroracatera" target="_blank"> <i class="fa fa-instagram"></i>
</a>
☰
</div>
I hope you can do something with it and add it to your project ...
I've been tampering around in W3 Schools and so far I've gotten the desired effect, but the navbar now expands with the dropdown menu. Is there a better way of doing this that I'm missing? Apologies in advance for formatting, and thank you for your time.
EDIT: To hopefully clarify a bit further: Example
Link to the W3schools thing: https://www.w3schools.com/code/tryit.asp?filename=GD1ZCKC1TKED
The code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.mainNav {
background-color: #000;
padding:12px 10px 0px 0px;
float: right;
overflow: hidden;
}
.mainNav a {
color: #FFF;
float: left;
display: block;
padding: 15px;
text-align: center;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.mainNav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
.mainNav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 500px) {
.logo {
max-width: 25%;
height: auto;
padding-top:10px;
margin-bottom:-50px;
display: block;
margin: auto;
}
.mainNav{
background-color: black;
width:100%;
font-size: 18px;
}
.mainNav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.mainNav a.icon {
float: right;
display: block;
}
.mainNav.responsive {
position: relative;
}
.mainNav.responsive .icon {
position: absolute;
right: 0;
top: 15px;
}
.mainNav.responsive a {
float: none;
display: block;
text-align: center;
}
.mainNav.responsive .dropdown {
float: none;
}
.mainNav.responsive .dropdown-content {
position: relative;
}
.mainNav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: center;
}
}
</style>
</head>
<body>
<div class="mainNav" id="navID">
Temp1
<div class="dropdown">
<button class="dropbtn">Temp2 <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Temp3<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Temp4 <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Temp5
☰
</div>
<script>
function myFunction() {
var x = document.getElementById("navID");
if (x.className === "mainNav") {
x.className += " responsive";
} else {
x.className = "mainNav";
}
}
</script>
</body>
</html>
The reason your entire nav is expanding is due to the positioning of the item. You have the .dropdown-content set to position: relative; By changing this to position: absolute; it will fix the first issue.
However, now to get the width the same as the parent, there are a few ways to do this. The easiest would be to simply set a width property to the dropdown-content as well, so it is always the same. The only issue will be if you have longer dropdown content areas so that the words are cut off. If this is the case, you can use min-width instead. I have calculated the width to be 97.45px; from the padding used on the <button> tag.
So all you will need to do is change your css of .dropdown-content to :
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
width: 97.45px;
}
or, like I said min-width: 97.45px; . This will keep it the same width as the parent while allowing options to expand with larger content.
If this isn't what you're looking for, please comment reply to this and I'd be happy to help. There's a few different ways to accomplish this. Purely setting a width might just be the most simple. Btw, welcome to Stack Overflow
Hello I added a bottom navigation bar in HTML and CSS code on my webpage but I want have that centered on the bottom of the website any help and solutions is greatly appreciated I have attached screenshots of the HTML, CSS codes and the webpage of where I have my navigation bar currently in the left hand side thanks very much in advance.
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
margin: 0px auto;
}
.navbar a:hover {
background: #f1f1f1;
color: black;
}
<div class="navbar">
About
Contact
Facebook Page
</div>
HTML navbar code
CSS navbar code
webpage navbar
Just Replace your CSS code with below css code:
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.navbar a {
color: #f2f2f2;
text-align: center;
display: inline-block;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
margin: 0px auto;
}
.navbar a:hover {
background: #f1f1f1;
color: black;
}
and your HTML with this code:
<div class="navbar">
<div class="navbar-inner">
About
Contact
Facebook Page
</div>
</div>
Hope this code will work as you expect ..
Add to .navbar:
text-align:center;
Delete from .navbar a:
float: left;
Update in .navbar a:
display: inline-block;
body {margin:0;}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #f1f1f1;
color: black;
}
.navbar a.active {
background-color: #DDA0DD;
color: white;
}
.main {
padding: 16px;
margin-bottom: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="navbar">
About
Contact
Facebook page
</div>
<div class="main">
<h1>Bottom Navigation Bar</h1>
<p>Some text some text some text.</p>
</div>
</body>
</html>
How to center a nav-bar at the bottom of a page