Active indicator for submenu items to be positioned at the bottom of the navbar box

[ipwsite]

Select Topic Area

Question

Body

Title: Active indicator for submenu items to be positioned at the bottom of the navbar box
Hello everyone,
I’m currently working on a multipurpose website using Bootstrap, and I've encountered an issue with the active indicator for submenu items to be positioned at the bottom of the navbar box, similar to how it appears on the Home, About, Contact, and etc pages.
Environment:
• Frameworks/Libraries Used: Bootstrap, Animate.css, Owl Carousel
• Browser Versions: Chrome, Safari
• Operating System: Macbook Pro
Description of the Issue:
I would like the active indicator for submenu items to be positioned at the bottom of the navbar box, similar to how it appears on the Home, About, Contact, and etc pages.
Current Implementation:
I have the following JavaScript code for managing the dropdown functionality and active state of links:
document.addEventListener('DOMContentLoaded', function () {
const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
const dropdownItems = document.querySelectorAll('.dropdown-item');
const servicesLink = document.querySelector('#servicesDropdown');

// Prevent default behavior when 'Services' is clicked
servicesLink.addEventListener('click', function (e) {
    e.preventDefault(); // Prevent the click from navigating
});

// Function to set active class for the clicked link
function setActiveLink(link) {
    // Remove active class from all links
    navLinks.forEach(nav => nav.classList.remove('active'));

    // Add active class to the clicked link
    link.classList.add('active');
}

// Set the active link based on the current URL
const currentUrl = window.location.pathname.split('/').pop(); // Get the current page URL
navLinks.forEach(link => {
    if (link.getAttribute('href') === currentUrl) {
        setActiveLink(link); // Set the active link if it matches the current URL
    }
});

// Handle click events for main navbar links
navLinks.forEach(link => {
    link.addEventListener('click', function (e) {
        // Prevent default behavior
        e.preventDefault();
        const href = this.getAttribute('href');

        // Set active class immediately on click
        setActiveLink(this);

        // Navigate to the clicked link's href after a short delay
        setTimeout(() => {
            if (href && href !== '#') {
                window.location.href = href; // Navigate to the page
            }
        }, 0); // Delay to ensure active class is applied
    });
});

// Handle active class and underline for main links
navLinks.forEach(link => {
    link.addEventListener('click', function () {
        navLinks.forEach(nav => nav.classList.remove('active'));
        this.classList.add('active');
    });
});

// Handle active class and underline for dropdown items
dropdownItems.forEach(item => {
    item.addEventListener('click', function () {
        navLinks.forEach(nav => nav.classList.remove('active'));
        this.closest('.dropdown').querySelector('.nav-link').classList.add('active');
    });
});

// Remove active class from parent dropdown when clicked
navLinks.forEach(link => {
    link.addEventListener('click', function (e) {
        // Remove active class from parent dropdown
        const dropdown = link.closest('.dropdown');
        if (dropdown) {
            dropdown.classList.remove('active');
        }
    });
});

});
CSS Code:
/* Start Top Bar Styles /
.top-bar {
background: linear-gradient(to right, #001f3f, #3366); / Dark blue gradient for the top bar background /
color: white; / Text color for the top bar /
padding: 10px 0; / Vertical padding for top and bottom /
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); / Subtle shadow effect for depth /
display: flex; / Flexbox for layout /
justify-content: space-between; / Space out items /
align-items: center; / Vertically center items */
}

.contact-info {
font-size: 13px; /* Font size for contact information /
padding-left: 15px; / Left padding for contact information */
}

.info-item {
margin-right: 15px; /* Right margin between info items */
}

.info-item i {
color: white; /* Icon color for info items */
}

.social-icons {
font-size: 16px; /* Font size for social media icons /
padding-right: 15px; / Right padding for social icons */
}

.social-icon {
color: white; /* Default color for social icon links /
text-decoration: none; / No underline for social icon links */
}

.social-icon:hover {
color: #f0f0f0; /* Hover color for social icons */
}

/* Hide the top bar on mobile /
@media (max-width: 768px) {
.top-bar {
display: none !important; / Hide the top bar on screens smaller than 768px /
}
}
/ End Top Bar Styles */

/* Start Sticky Navbar Styles /
.navbar {
background-color: #007bff; / Background color for the navbar /
padding: 1rem 0; / Vertical padding for the navbar /
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); / Shadow for depth /
z-index: 1000; / Stacking order of the navbar */
}

.navbar-brand img {
max-height: 40px; /* Maximum height for the logo image in the navbar */
}

.navbar-nav .nav-link {
color: rgba(0, 0, 0, 0.7); /* Default color for navbar links /
transition: color 0.3s ease, background-color 0.3s ease; / Smooth transition for hover effects /
font-family: 'Arial', sans-serif; / Font family for navbar links /
font-size: 18px; / Font size for navbar links /
font-weight: 500; / Font weight for navbar links /
letter-spacing: 0.5px; / Spacing between letters in navbar links */
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
color: #4085; /* Hover and focus color for navbar links /
background-color: rgba(255, 255, 255, 0.2); / Background color for hover and focus state */
}

/* Active indicator for the navbar /
.navbar-nav .nav-link.active {
position: relative; / Position relative for the pseudo-element */
}

/* Change to position the indicator at the bottom of the navbar /
.navbar-nav .nav-link.active::after {
content: ''; / Create a pseudo-element for the active indicator /
position: absolute;
left: 6px; / Adjust to align with the navbar item /
bottom: -20px; / Adjust to position below the navbar item /
width: 80%; / Set to 100% for full width /
height: 3px; / Height of the active indicator /
background-color: #4085; / Color of the active indicator /
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); / Shadow effect for depth */
}

/* Dropdown Menu /
.dropdown-menu {
background-color: #ffffff; / Background color for dropdown menu /
border: none; / No border for dropdown menu /
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); / Shadow effect for dropdown menu /
display: none; / Hide dropdown menu by default */
}

.dropdown-item {
color: #343a40; /* Text color for dropdown items */
}

.btn-primary {
background-color: #0056b3; /* Background color for primary button /
border: none; / No border for primary button /
font-weight: 500; / Font weight for primary button /
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); / Shadow for primary button /
transition: background-color 0.3s ease; / Smooth transition for background color on hover */
}

.btn-primary:hover,
.btn-primary:focus {
background-color: #4085; /* Background color for hovered or focused primary button */
}

/* Responsive design for mobile /
@media (max-width: 768px) {
.navbar-brand img {
max-width: 80px; / Max width for logo image on mobile devices */
}

.top-bar {
    font-size: 12px; /* Decreased font size for top bar on mobile */
}

.social-icons {
    font-size: 14px; /* Decreased font size for social icons on mobile */
}

}

/* Show dropdown menu when hovered /
.nav-item.dropdown:hover .dropdown-menu {
display: block; / Show dropdown menu when hovered */
}

.dropdown-menu.show {
display: block; /* Ensure dropdown menu is shown when active */
}

/* Disable pointer events to make the 'Services' link unclickable /
#servicesDropdown {
pointer-events: none; / Disable pointer events for Services link */
}

/* Disable pointer events to make the 'Pages' link unclickable /
#pagesDropdown {
pointer-events: none; / Disable pointer events for Pages link */
}

/* Add active class for Services when Service2 is clicked /
.navbar-nav .nav-link[href="service2.html"].active {
position: relative; / Position relative for the pseudo-element /
color: #4085; / Active color for Services */
}

/* Change to this /
.navbar-nav .nav-link:not(.dropdown-item).active::after {
/ Add your desired styles here for the active indicator /
content: '';
position: absolute;
bottom: -5px; / Adjust as necessary /
left: 0;
right: 0;
height: 3px; / Adjust the height of the indicator /
background-color: #007bff; / Change this to your preferred color */
}

/* Add this style /
.navbar-nav .nav-link.active::after {
/ Additional styles for active links if needed */
}

/* Ensure that the submenu items (like Service1, Service2) do not affect the main menu's active state /
.navbar-nav .nav-item.dropdown .dropdown-item.active::after {
display: none; / Hide the active indicator for dropdown items */
}

/* Add active class for Services when Service2 is clicked /
.navbar-nav .nav-link[href="service2.html"].active {
position: relative; / Position relative for the pseudo-element /
color: #4085; / Active color for Services */
}

/* End Sticky Navbar Styles */

HTML Code:

<title>Your Company Name | Web Design Services with Sticky Navbar</title>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">

<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<!-- Animate.css for animations -->
<link rel="stylesheet" href="lib/animate/animate.min.css">

<!-- Custom CSS for Header -->
<link rel="stylesheet" href="css/header.css">

<!-- Top Bar Start -->
<div class="top-bar d-flex justify-content-between align-items-center">
    <div class="contact-info d-flex align-items-center">
        <div class="info-item d-flex align-items-center me-3">
            <i class="fas fa-map-marker-alt"></i>
            <span class="ms-2">123 Street, New York, USA</span>
        </div>
        <div class="info-item d-flex align-items-center me-3">
            <i class="fas fa-phone"></i>
            <span class="ms-2">+012 345 6789</span>
        </div>
        <div class="info-item d-flex align-items-center">
            <i class="fas fa-envelope"></i>
            <span class="ms-2">[email protected]</span>
        </div>
    </div>
    <div class="social-icons d-flex">
        <a href="#" class="social-icon me-3"><i class="fab fa-twitter"></i></a>
        <a href="#" class="social-icon me-3"><i class="fab fa-facebook"></i></a>
        <a href="#" class="social-icon me-3"><i class="fab fa-linkedin"></i></a>
        <a href="#" class="social-icon me-3"><i class="fab fa-instagram"></i></a>
        <a href="#" class="social-icon"><i class="fab fa-youtube"></i></a>
    </div>
</div>
<!-- Top Bar End -->

<!-- Sticky Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
    <div class="container">
        <a class="navbar-brand" href="index.html">
            <img src="images/logo.png" alt="Company Logo" class="logo">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link" href="index.html">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="about.html">About</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="services.html" id="servicesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Services
                    </a>
                    <div class="dropdown-menu" aria-labelledby="servicesDropdown">
                        <a class="dropdown-item" href="service1.html">Service 1</a>
                        <a class="dropdown-item active" href="service2.html">Service 2</a> <!-- Ensure this is marked active -->
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <!-- Pages menu, non-clickable -->
                    <a class="nav-link dropdown-toggle" id="pagesDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Pages
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="pagesDropdown">
                        <li><a class="dropdown-item" href="#">Page 1</a></li>
                        <li><a class="dropdown-item" href="page2.html">Page 2</a></li>
                        <li><a class="dropdown-item" href="#">Page 3</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="contact.html">Contact</a>
                </li>
            </ul>
            <a href="#" class="btn btn-primary">Get a Free Quote</a>
        </div>
    </div>
</nav>

<div class="container mt-5">
    <h1>Welcome to Our Service 2 Page</h1>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>
    <p>This page describes our second service in detail. Feel free to reach out for more information!</p>

    <!-- Repeated paragraphs omitted for brevity -->
</div>

<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/navbar.js"></script>

Troubleshooting Steps Taken:

1. Event Listeners: Verified that event listeners are correctly attached to the navbar links and the "Services" link.
2. Functionality Testing: Tested in multiple browsers to see if the issue was browser-specific.
3. CSS Conflicts: Ensured there are no conflicting styles affecting the visibility or behavior of the dropdowns.
   Additional Context:
   • The dropdown is not displaying correctly when clicking the "Services" link.
   Questions:
   • Has anyone experienced similar issues with Bootstrap dropdowns?
   • Are there any specific changes you would recommend to ensure the dropdown behaves as intended?
   • What additional troubleshooting steps can I take to resolve this issue?
   Thank you for your help!

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬