Sticky Bottom Navigation Bar with Hover Effects

Creating a modern, user-friendly navigation is a key element of any website. A Sticky Bottom Navigation Bar is a great way to provide convenient access to the main sections of a site. Regardless of where the user is on the page.

A Sticky Navigation Bar, or a “pinned” navigation bar at the bottom of the screen, remains visible even while scrolling. This allows users to navigate quickly between sections without having to scroll back to the top. By adding hover effects—such as icon highlighting or slight enlargement—we can make the interaction with navigation more intuitive and visually appealing.

This type of navigation bar is ideal for both mobile and desktop versions of websites, adding a modern, dynamic look and enhancing the user experience. In the article, we’ll show how to create a Navigation Bar sticked to the bottom. We’ll be using HTML, CSS, and JavaScript, so your site stands out with functionality and style.

HTML Structure

<div class="sf-floating-bar">
    <a href="#" data-menu="Home" class="sf-button"><i class="fa-solid fa-house"></i></a>
    <a href="#" data-menu="Shop" class="sf-button"><i class="fa-solid fa-table-cells-large"></i></a>
    <a href="#" data-menu="Wishlist" class="sf-button"><i class="fa-regular fa-heart"></i></a>
    <a href="#" data-menu="Cart" class="sf-button"><i class="fa-solid fa-cart-shopping"></i><span class="cart-badge">2</span></a>
    <a href="#" data-menu="Profile" class="sf-button"><i class="fa-solid fa-user"></i></a>
</div>

Styling the Sticky Bottom Navigation Bar

/* ---------------------------------------------------------- */
/*  Snippflow Sticky Bottom Navigation Bar with Hover Effects */
/* ---------------------------------------------------------- */

.sf-floating-bar,
.sf-floating-bar .sf-button,
.sf-floating-bar .sf-button .cart-badge {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.sf-floating-bar {
    position: fixed;
    left: 50%;
    bottom: 40px;
    z-index: 2;
    transform: translateX(-50%);
    max-width: 100%;
    padding: 8px;
    border-radius: 8px;
    background-color: #212121;
    box-shadow: 0px 8px 8px -4px rgba(0, 0, 0, 0.15), 0px 20px 24px -4px rgba(0, 0, 0, 0.08);
}

.sf-floating-bar .sf-button {
	position: relative;
	width: 56px;
    height: 56px;
    font-size: 18px;
    color: #fff;
	border-radius: 4px;
	box-sizing: border-box;
	text-decoration: none;
}
.sf-floating-bar .sf-button .cart-badge {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 18px;
    height: 18px;
    font-size: 11px;
    background-color: #63D9B3;
    color: #fff;
    border-radius: 100%;
}

.sf-floating-bar .sf-button:before {
    content: attr(data-menu);
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #2a3733;
    color: #63D9B3;
    font-size: 11px;
    padding: 2px 6px;
    opacity: 0;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 4px;
}
.sf-floating-bar .sf-button:hover {
    color: #63D9B3;
}
.sf-floating-bar .sf-button:hover i {
    margin-top: -25px;
}
.sf-floating-bar .sf-button:hover .cart-badge {
    top: -4px;
}
.sf-floating-bar .sf-button:hover:before {
    opacity: 1;
    bottom: 5px;
}

.sf-floating-bar .sf-button,
.sf-floating-bar .sf-button:before,
.sf-floating-bar .sf-button .cart-badge,
.sf-floating-bar .sf-button i {
    transition: all .3s ease-in-out;
}

Advantages of Sticky Bottom Navigation Bar

• Easy Navigation – The navigation bar remains visible at all times, allowing users to quickly switch between sections without the need to scroll.
• Improved UX – Hover effects, such as highlighting or animations, add interactivity to the site and make navigation more intuitive.
• Mobile Friendliness – Sticky bottom navigation works well on mobile devices, improving the user experience for smartphone and tablet users.
• Aesthetic Appeal – Thanks to hover effects, the navigation bar becomes visually more attractive, adding a modern touch to the website.
• Increased Engagement – A clear, interactive navigation bar encourages users to explore site content, which can lead to longer time spent on the site.

See the Pen Sticky Bottom Navigation Bar with Hover Effects by Snippflow (@snippflow) on CodePen.

See also: Floating Icon Bar with tooltips