You can try position:fixed:
nav{
position:fixed;
bottom:0;
left:0;
width:100%;
}
Solution 1 :
Solution 2 :
You can set nav .menu as position: absolute; bottom:0;
nav .menu{
text-align: center;
margin-bottom:0px;
width: 100%;
position: absolute;
bottom:0;
}
Solution 3 :
In addition to margin-bottom: 0, try adding bottom: 0. The margin-bottom only creates no margin at the bottom of the element, but that doesn’t make the element at the bottom of the user interface. The bottom: 0 property and value will make 0 space from the bottom to the element. That might’ve been confusing, but the code for the navbar should look like so:
nav .menu{
text-align: center;
margin-bottom: 0px;
bottom: 0;
width: 100%;
}
You can read more about the bottom property here.
Problem :
I would like to know the way in which i can set this navbar just at the bottom of the page. I’ve been trying everything but it does not seems to be set at the bottom. I’ve tried with bottom, margin-bottom, i also dont know if there is a configuration i already set in my css that does not let these commands mentioned before to work.
HTML
<!doctype html>
{%load staticfiles%}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Home</title>
<link rel="stylesheet" href="{%static 'index/css/index.css'%}">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/glacial-indifference" type="text/css"/>
<script src="https://kit.fontawesome.com/b525a42bf1.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="logo"><h2>MediTracker</h2></div>
<nav>
<div class="menu">
<ul class="clear">
<li><a href="" title="home"><i class="fa fa-home"></i><span class="link-text">Home</span></a></li>
<li><a href="" title="about"><i class="fa fa-question-circle"></i><span class="link-text">About</span></a></li>
<li><a href="" title="pricing"><i class="fa fa-money-bill-alt"></i><span class="link-text">Pricing</span></a></li>
<li><a href="" title="services"><i class="fa fa-tools"></i><span class="link-text">Services</span></a></li>
<li><a href="" title="contact"><i class="fa fa-phone"></i><span class="link-text">Contact Us</span></a></li>
</ul>
</div>
</nav>
</body>
</html>
CSS
body{
background-color: #333;
background-size: cover;
background-position: center;
font-family: 'GlacialIndifferenceRegular';
overflow: hidden;
font-weight: 600;
height: 85vh;
}
a{
text-decoration: none;
}
.clear:after{
content: "";
display: block;
clear:both;
}
nav .menu{
text-align: center;
margin-bottom:0px;
width: 100%;
}
nav .menu ul{
list-style: none;
display: inline-block;
}
nav .menu ul li{
float: left;
width: 150px;
height: 150px;
background-color: white;
transition: background-color 0.2s linear 0s;
}
nav .menu ul li a{
display: table;
width: 100%;
height: 100%;
position: relative;
text-align: center;
}
nav .menu a i{
display: block;
vertical-align: middle;
color: #333;
font-size: 23px;
transform: all 0.2s linear 0s;
padding: 44px 0 10px;
}
nav .menu a i:before{
width: 41px;
display: inline-block;
height: 41px;
line-height: 37px;
transition: color 0.2s linear 0s,
font-size 0.2s linear 0s,
border-color 0.2s linear 0.2s,
height 0.2s linear 0s,
line-height 0.2s linear 0s;
}
nav .menu a .link-text{
right: 45px;
color: #333;
font-size: 14px;
text-transform: uppercase;
transition: all 0.2s linear 0s;
}
nav .menu ul li:hover{
background-color: #42d3e3;
}
nav .menu ul li:hover + li:last-child{
border-right-color: blue;
}
nav .menu ul li:hover .link-text{
opacity: 0;
}
nav .menu ul li:hover i{
color: #333;
font-size: 50px;
}
nav .menu ul li:hover i:before{
border-color: transparent;
border-radius: 500px;
line-height: 40px;
transition: color 0.2s linear 0s,
font-size 0.2s linear 0s,
border-color 0.2s linear 0.2s,
height 0.2s linear 0s,
line-height 0.2s linear 0s;
}