Looking for ways to enhance the responsive menu at the bottom of a webpage? Consider centering the copyright div at the bottom of the screen without being obstructed by menu items. As the browser window shrinks, ensure that the copyright statement remains visible and then seamlessly repositions below the menu items when they overlap or when the menu expands after being minimized.
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;
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}
.navbar a {
float: right;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.navbar a.active {
background-color: #04AA6D;
color: white;
}
.navbar .icon {
display: none;
}
#copyright {
position: absolute;
top: 20%;
left: 25%;
width: 50%;
height: 50%;
color: white;
}
@media screen and (max-width: 600px) {
.navbar a:not(:first-child) {
display: none;
}
.navbar a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.navbar.responsive .icon {
position: absolute;
right: 0;
bottom: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="navbar" id="myNavbar">
<div id="copyright">© domain.com</div>
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
<div style="padding-left:16px">
<h2>Responsive Bottom Navbar Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>
</body>
</html>Share your thoughts on improving this setup!