A well-designed navigation menu enhances user experience, especially when it dynamically adjusts based on scrolling behavior. A responsive navigation bar helps maintain a clean and organized interface while maximizing screen space.
In this guide, we’ll walk you through how to shrink a navigation menu on scroll using HTML, CSS, and JavaScript. By implementing this feature, your website will have a more professional look, improving both usability and aesthetic appeal.
Step 1: Create the HTML Structure
First, let’s define the navigation bar in HTML. This code will serve as the base for our styling and interactive effects:
<div id="navbar">
<a href="#default" id="logo">BrandName</a>
<div id="navbar-right">
<a class="active" href="#home">Home</a>
<a href="#services">Services</a>
<a href="#portfolio">Portfolio</a>
<a href="#contact">Contact</a>
<a href="#blog">Blog</a>
</div>
</div>
This simple structure includes a logo on the left and navigation links on the right. The additional “Blog” section provides a more comprehensive example of how a typical website might be structured.
We’ll style the navigation bar and add a transition effect so that it smoothly shrinks when scrolling. The design will incorporate a professional color scheme for a visually appealing look.
/* Fixed navigation bar */
#navbar {
overflow: hidden;
background-color: #004d7a; /* Unique navy blue color */
padding: 80px 10px; /* Large padding that shrinks on scroll */
transition: 0.4s;
position: fixed;
width: 100%;
top: 0;
z-index: 99;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Style the navigation links */
#navbar a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
line-height: 25px;
border-radius: 5px;
font-family: Arial, sans-serif;
}
/* Logo styling */
#navbar #logo {
font-size: 40px;
font-weight: bold;
transition: 0.4s;
}
/* Change link colors on hover */
#navbar a:hover {
background-color: #008cba;
color: white;
}
/* Active link styling */
#navbar a.active {
background-color: #ff5733; /* Unique orange color */
color: white;
}
/* Right-aligned links */
#navbar-right {
float: right;
}
/* Responsive navigation bar for smaller screens */
@media screen and (max-width: 580px) {
#navbar {
padding: 20px 10px !important;
}
#navbar a {
float: none;
display: block;
text-align: left;
}
#navbar-right {
float: none;
}
}
Explanation of the CSS Code:
This CSS code styles a fixed navigation bar with a responsive design. It includes effects like a shrinking navbar on scroll, smooth transitions, hover effects, and a mobile-friendly layout.
#navbar {
overflow: hidden;
background-color: #004d7a; /* Unique navy blue color */
padding: 80px 10px; /* Large padding that shrinks on scroll */
transition: 0.4s;
position: fixed;
width: 100%;
top: 0;
z-index: 99;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
overflow: hidden;→ Ensures no overflowing content inside the navbar- .
background-color: #004d7a;→ Sets the navbar’s background color to navy blue. padding: 80px 10px;→ Adds large padding to the navbar, which shrinks on scroll- .
transition: 0.4s;→ Smooth transition effect for padding changes. position: fixed;→ Fixes the navbar at the top, ensuring it stays visible when scrolling.width: 100%;→ Makes the navbar stretch across the full width of the screen.top: 0;→ Positions the navbar at the very top.z-index: 99;→ Ensures the navbar stays above other content.box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);→ Adds a subtle shadow for a 3D effect.
#navbar a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
line-height: 25px;
border-radius: 5px;
font-family: Arial, sans-serif;
}
float: left;→ Aligns links to the left inside the navbar.color: white;→ Sets the text color to white.text-align: center;→ Centers text inside each link.padding: 14px 16px;→ Adds space around each link.text-decoration: none;→ Removes underlines from links.font-size: 20px;→ Sets the font size to 20px.line-height: 25px;→ Defines the line height for better readability.border-radius: 5px;→ Rounds the corners of each link.font-family: Arial, sans-serif;→ Uses Arial (or a similar sans-serif font).
Styling the Logo
#navbar #logo {
font-size: 40px;
font-weight: bold;
transition: 0.4s;
}
font-size: 40px;→ Makes the logo text large.font-weight: bold;→ Emphasizes the logo with a bold font.transition: 0.4s;→ Adds a smooth resizing effect when scrolling.
Hover Effect for Links
#navbar a:hover {
background-color: #008cba;
color: white;
}
background-color: #008cba;→ Changes the background color to blue on hover.color: white;→ Ensures the text remains readable.
Active Link Styling
#navbar a.active {
background-color: #ff5733; /* Unique orange color */
color: white;
}
background-color: #ff5733;→ Highlights the currently active page with an orange background.color: white;→ Keeps text readable.
Aligning Links to the Right
#navbar-right {
float: right;
}
float: right;→ Moves specific navigation links (e.g., Home, Services, Portfolio, Contact) to the 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;
}
}
@media screen and (max-width: 580px)→ Applies styles only when the screen width is 580px or smaller.#navbar { padding: 20px 10px !important; }→ Reduces navbar padding to fit smaller screens.#navbar a { float: none; display: block; text-align: left; }
- Stops floating elements.
- Displays links vertically instead of horizontally.
- Aligns links to the left.
#navbar-right { float: none; } → Ensures right-aligned links also appear vertically.
This CSS defines the navigation bar’s style, including colors, fonts, and responsiveness for smaller screens. The added shadow effect enhances the navbar’s visibility and gives it a modern touch.
Step 3: Implement JavaScript for the Shrinking Effect
Now, let’s use JavaScript to dynamically shrink the navbar when scrolling. This effect will create a smooth transition between the large and compact states of the navigation bar.
// Function to shrink the navbar on scroll
window.onscroll = function() { adjustNavbar() };
function adjustNavbar() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById("navbar").style.padding = "30px 10px";
document.getElementById("logo").style.fontSize = "28px";
} else {
document.getElementById("navbar").style.padding = "80px 10px";
document.getElementById("logo").style.fontSize = "40px";
}
}
This script reduces the navbar’s padding and the logo’s font size when the user scrolls down 80 pixels, creating a smooth shrinking effect. It ensures that users have an optimal experience by keeping the navigation accessible while avoiding unnecessary use of screen space.
Additional Enhancements
Adding an Animated Scroll Effect
To further enhance the user experience, consider adding an animated scroll effect using CSS:
html {
scroll-behavior: smooth;
}
This ensures that when users click on navigation links, the page scrolls smoothly to the corresponding section rather than jumping abruptly.
To improve usability, you can add a background color change effect when scrolling:
function adjustNavbar() {
var navbar = document.getElementById("navbar");
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
navbar.style.padding = "30px 10px";
navbar.style.backgroundColor = "#002244"; /* Darker shade */
document.getElementById("logo").style.fontSize = "28px";
} else {
navbar.style.padding = "80px 10px";
navbar.style.backgroundColor = "#004d7a";
document.getElementById("logo").style.fontSize = "40px";
}
}
Explanation of the Code:
The function adjustNavbar() dynamically adjusts the appearance of a navigation bar based on the user’s scroll position. It modifies the padding, background color, and logo font size when the user scrolls down a certain distance.
jsCopyEditvar navbar = document.getElementById("navbar");
- The
getElementById("navbar")method retrieves the HTML element with the id"navbar"and stores it in thenavbarvariable.
This subtle color transition adds a polished effect to your website, enhancing the overall experience.
Check Scroll Position
jsCopyEditif (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
- The condition checks if the user has scrolled more than 80 pixels from the top of the page.
document.body.scrollTop→ Works in some browsers (older versions).document.documentElement.scrollTop→ Works in modern browsers (for<html>element).- The
||operator ensures compatibility across different browsers.
jsCopyEditnavbar.style.padding = "30px 10px";
navbar.style.backgroundColor = "#002244"; /* Darker shade */
document.getElementById("logo").style.fontSize = "28px";
- If the user scrolls down past 80px, the navbar:
- Shrinks its padding from 80px 10px to 30px 10px, making it smaller.
- Changes its background color to a darker shade (
#002244). - Reduces the logo font size from 40px to 28px.
jsCopyEdit} else {
navbar.style.padding = "80px 10px";
navbar.style.backgroundColor = "#004d7a";
document.getElementById("logo").style.fontSize = "40px";
}
- If the user scrolls back to the top (less than 80px), the navbar:
- Expands its padding back to 80px 10px.
- Changes its background color to a lighter shade (
#004d7a). - Increases the logo font size back to 40px.
Conclusion
By following these steps, you have a dynamic navigation menu that shrinks on scroll, enhancing user experience while keeping your site visually appealing. The combination of CSS transitions and JavaScript scroll events ensures a seamless effect.
Additionally, by incorporating smooth scrolling and a background transition, your website navigation becomes even more user-friendly and modern. Customize the colors and fonts to match your brand identity for a unique touch!
I hope you’ll find this article on how to shrink a navigation menu on scroll useful.
Happy coding and designing!
How to Install OpenLiteSpeed on Ubuntu 20.04: 6 Easy Steps