Shrink Navigation Menu bar
To Shrink Navigation Menu bar, you can reduce its size using CSS styles, such as setting a smaller font size, reducing padding, and adjusting the height and width of the menu items. You can also use media queries to make the menu responsive, and change its appearance based on the screen size. For example, you can make the menu a dropdown on smaller screens and display it as a horizontal bar on larger screens.
HTML and JavaScript
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="navbar">
<a href="#default" id="logo">Web Master</a>
<div id="navbar-right">
<a href ="#">Home</a>
<a href ="#">News</a>
<a href ="#">Blog</a>
<a href ="#">Gallery</a>
<a href ="#">About</a>
<a href ="#">Contact</a>
</div>
</div>
<div style="margin-top:210px;padding:15px 15px 2500px;font-size:30px">
<h1>Srink navigation bar</h1>
<p>Lorem ipsum dolor dummy text to enable scrolling, sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor dummy text to enable scrolling, sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("navbar").style.padding = "15px 10px";
document.getElementById("logo").style.fontSize = "20px";
} else {
document.getElementById("navbar").style.padding = "50px 10px";
document.getElementById("logo").style.fontSize = "35px";
}
}
</script>
</body>
</html>
CSS
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#navbar {
overflow: hidden;
background: linear-gradient(20deg, #000, #6170cf, #ffeb3b, #03a9f4);
background-size: 200%;
padding: 50px 10px;
transition: 0.4s;
position: fixed;
width: 100%;
top: 0;
z-index: 99;
}
#navbar a {
float: left;
color: #fff;
text-align: center;
padding: 12px 20px;
text-decoration: none;
font-size: 14px;
text-transform: uppercase;
font-weight: bold;
line-height: 20px;
border-radius: 4px;
}
#navbar #logo {
font-size: 35px;
font-weight: bold;
transition: 0.4s;
}
#navbar a:hover {
background-color: dodgerblue;
}
#navbar-right {
float: right;
}
@media screen and (max-width: 580px) {
#navbar {
padding: 20px 10px !important;
}
#navbar a {
float: none;
display: block;
text-align: left;
}
#navbar-right {
float: none;
}
}
For More Tutorials Please Click Here
