I have the following code which contains a modification of CSS code suggested by another user in one of my posted questions.
The code implements a grid which is used as a responsive footer menu, which also contains a copyright reference for the site.
The problem is that the footer covers the content of the website. Is there a way to avoid covering any of the 3 tags of the website with the tag that implements the grid?
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className = " responsive";
} else {
x.className = "navbar";
}
}body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#content {
max-width: 720px;
margin: 100px auto 0;
}
#divleft {
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
left: calc((100% - 720px)/4);
width: 200px;
height: 400px;
border: solid;
border-color: red;
}
#divright {
position: fixed;
top: 50%;
transform: translate(50%, -50%);
right: calc((100% - 720px)/4);
width: 200px;
height: 400px;
border: solid;
border-color: red;
}
/*
The Navigation Container/Block
*/
.navbar {
background-color: #333;
position: fixed;
bottom: 0%;
right: 0%;
width: 100%;
}
/*
Grid Container
*/
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
/*
Item 1
*/
.item-1 {
text-align: end;
}
/*
Item 2
*/
.item-2 {
color: white;
display: flex;
align-items: center;
justify-content: center;
}
/*
Item 3
*/
.item-3 {
text-align: end;
display: flex;
align-items: center;
justify-content: flex-end;
}
.item-3 a {
color: #f2f2f2;
text-align: center;
padding: 15px 16px;
text-decoration: none;
}
.item-3 a:hover {
background-color: #ddd;
color: black;
}
.item-3 a.active {
background-color: #04aa6d;
color: white;
}
/*
Toggle Icon For Menu
*/
.navbar .icon {
display: none;
}
/*
This Will Display In Media Queries
*/
.copyright-bottom {
display: none;
}
/*
Media Queries
*/
@media screen and (max-width: 970px) {
.item-3 a {
display: none;
}
.navbar a.icon {
display: block;
}
.navbar.responsive .icon {
position: absolute;
right: 0;
bottom: 0;
}
.navbar.responsive a {
display: block;
text-align: left;
}
.navbar.responsive .copyright-bottom {
display: block;
text-align: center;
color: white;
}
.navbar.responsive .copyright {
display: none;
}
.navbar.responsive .item-3 {
grid-column: span 3;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section id="divleft"></section>
<section id="content">
<h2>Responsive Bottom Navbar Example</h2>
<p>Resize the browser window to see how it works.</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et viverra justo. Suspendisse quis ligula ac nibh ultricies ultrices. Etiam vel sagittis nunc. Praesent mi justo, ultrices sit amet lectus id, tincidunt volutpat nulla. Vivamus neque dolor,
elementum sit amet enim in, fringilla faucibus neque. Fusce a lectus enim. Pellentesque risus orci, efficitur et facilisis et, egestas eu eros. Sed commodo lacinia dolor eget suscipit. Ut facilisis orci lorem, et vehicula risus sollicitudin eu. Donec
aliquam urna at mi consectetur, sed condimentum velit vehicula. Nam et urna fringilla, vulputate risus ac, posuere ante. Morbi at ex et libero lobortis viverra. Donec nibh massa, faucibus a hendrerit ac, faucibus ac diam. Nunc vel gravida dui, euismod
viverra ex. Praesent elementum egestas venenatis. Duis quis nulla mi. Aliquam efficitur enim ipsum, sed venenatis tortor tempor eu. Maecenas maximus diam nec ante pellentesque, a efficitur ipsum semper. Donec sagittis enim quis nisl efficitur sodales.
Etiam porttitor tristique urna ut auctor. Mauris eget urna quis diam interdum euismod et vel turpis. Quisque vel tincidunt purus. Aliquam a mauris tortor. Vestibulum fringilla augue sit amet egestas tempus. Pellentesque pellentesque erat id porta
interdum. Vestibulum eros nibh, sagittis sit amet velit ut, auctor tincidunt tortor. Cras blandit condimentum enim ac sagittis. Nunc pretium, metus id pulvinar efficitur, nunc nunc sagittis sem, eget efficitur elit dui quis nisi. Mauris eros ex, elementum
sit amet neque at, elementum bibendum quam. Quisque ornare in lacus non maximus. Nullam volutpat, nisi vel consectetur mattis, magna ligula condimentum mauris, sed accumsan nibh augue quis dolor. Aenean id dignissim purus. Donec venenatis condimentum
nisl, quis placerat lorem suscipit nec. Vestibulum ante massa, euismod et pellentesque ut, eleifend volutpat arcu. Mauris porttitor nec orci vitae hendrerit. Suspendisse cursus urna id ullamcorper placerat. Nullam varius diam ut nibh molestie, a sodales
leo ultricies. Ut eget felis malesuada, imperdiet lectus finibus, aliquam quam. Pellentesque ac leo aliquam, viverra lorem in, dignissim nisl. Cras ligula mauris, bibendum vel ex ac, sodales ullamcorper magna. Etiam ac libero ut mi semper dignissim.
Proin eu enim at nunc porttitor mattis. Duis nec nisi vel est lacinia tincidunt. Sed interdum turpis sed ante maximus tristique. Etiam non urna placerat, ornare diam at, dictum massa. Praesent et imperdiet sem, quis varius mauris. Proin nunc elit,
vehicula non posuere sed, rhoncus vitae nunc. Duis ornare condimentum felis ut tempor. Donec tempor est nec diam gravida fermentum. Sed sit amet libero non tortor ultricies lacinia eu cursus metus. Morbi porta blandit libero sit amet laoreet. Vivamus
auctor dui sit amet turpis rutrum dapibus. Quisque tortor ipsum, interdum id sodales in, cursus at turpis. Duis dui sapien, finibus vel venenatis a, gravida nec sapien. Aenean tortor lorem, venenatis eu quam ac, ullamcorper pulvinar erat. In hac habitasse
platea dictumst. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus eleifend interdum mattis. Praesent et mi nec lacus mattis dictum quis et augue. Donec aliquam rutrum felis ac vestibulum. Sed vehicula
luctus enim. Vivamus pharetra neque nec ante tincidunt, quis lobortis quam rutrum. Nulla non consequat mauris, vel posuere nisi. Fusce varius imperdiet libero sit amet mattis. Vivamus ut efficitur velit, quis dapibus nisi. Pellentesque tempus turpis
nec tortor mollis, in euismod lectus porttitor. Proin dignissim accumsan nisi a sollicitudin. Pellentesque scelerisque ipsum eu risus mollis dapibus. Cras eget ornare odio, ac ultricies urna. Aliquam porttitor nunc leo, eleifend pretium magna congue
ac. In ut odio et ante tincidunt malesuada vel ac velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean vestibulum tempus velit, nec maximus quam. Proin pellentesque risus vel enim dictum tincidunt. Curabitur purus turpis, efficitur
eu velit in, efficitur tincidunt neque. Proin dignissim efficitur nisl sit amet efficitur. Sed dictum tellus eu turpis porta porta. Vestibulum in ipsum urna. Donec finibus sed lacus sed mattis. Fusce lacinia mauris vitae mauris lobortis, ut auctor
neque posuere. Donec scelerisque mauris in justo cursus varius. Aliquam varius sodales diam vel iaculis. In et malesuada velit, nec pulvinar lacus. Quisque eu auctor tortor. Ut iaculis placerat lacus, quis tempor erat lacinia in. Vivamus tempor purus
velit, vel mollis enim pellentesque sed. Aenean euismod lobortis ultrices. In volutpat sem vitae iaculis dignissim. Sed auctor, leo lobortis aliquam sodales, tellus tortor mattis dolor, sed iaculis elit purus eu nisi. Donec viverra laoreet ipsum eget
pulvinar. Sed nisl ipsum, congue id ornare eu, vulputate vitae turpis. Suspendisse feugiat dui at elit placerat eleifend. Morbi quam ligula, eleifend nec elit vel, lacinia vehicula nibh. Maecenas in orci ut odio aliquam sodales a vitae urna. Maecenas
eget interdum dolor. Integer vel magna mi. Suspendisse at consectetur lectus, sed accumsan erat. Aliquam erat volutpat. Mauris non mauris auctor, fringilla arcu vitae, bibendum justo. Sed pulvinar et magna eget cursus. Etiam quis risus vitae ipsum
pharetra vulputate. Vestibulum commodo ac nisl sit amet porta. Ut ultrices tristique ipsum et commodo. Integer urna ipsum, vehicula convallis metus suscipit, euismod rhoncus lectus. Mauris elementum odio ut odio aliquam, ut fringilla tellus facilisis.
In vitae arcu ut orci pellentesque consequat. Maecenas sit amet sem a sem varius porta ut a risus. Phasellus ac lacus aliquam, mollis felis vel, finibus arcu. Ut sodales nulla odio, sit amet sodales nibh bibendum ac. Sed purus dolor, iaculis et nunc
sit amet, viverra maximus nisl.
</section>
<section id="divright"></section>
<footer class="navbar" id="myNavbar">
<div class="grid-container">
<div class="item-1"></div>
<div class="item-2">
<p class="copyright">© domain.com</p>
</div>
<div class="item-3">
<a href="#about">About</a>
<a href="#contact">Contact</a>
<a href="#news">News</a>
<a href="#home" class="active">Home</a>
<a href="javascript:void(0);" style="font-size: 15px" class="icon" onclick="myFunction()">☰</a
>
</div>
</div>
<p class="copyright-bottom">© domain.com</p>
</footer>
</body>
</html>CodePudding user response：
You can update your footer like this, so the footer doesn't cover your text.
Your two ad bars have a fixed height and width, so your footer will cover those on different screen sizes.
.navbar {
background-color: #333;
position: sticky;
bottom: 0;
right: 0;
width: 100%;
}
CodePudding user response：
You Can Use This:
you can change the value with the one you want!
#content
{
margin-bottom:70px;
}