移动端Navbar滚动或页面跳转时不自动关闭及汉堡切换器颜色修改问题求助

Hey there! Let’s break down and solve each of your Navbar problems step by step—all of these are straightforward fixes with Bootstrap in React, so we’ll get this sorted quickly.

1. Mobile Navbar Doesn’t Collapse on Scroll #

Bootstrap doesn’t include scroll-to-collapse behavior out of the box, but we can add it using React hooks and Bootstrap’s Collapse API. Here’s how to implement it:

First, update your Header component with state, refs, and event listeners to control the collapse state:

import React, { useState, useEffect, useRef } from 'react'
import { NavLink } from 'react-router-dom';
import navlogo from '../Images/navlogo.png';
import Collapse from 'bootstrap/js/dist/collapse';

const Header = () => {
  const [isNavOpen, setIsNavOpen] = useState(false);
  const collapseRef = useRef(null);
  let collapseInstance = null;

  // Initialize Bootstrap Collapse instance
  useEffect(() => {
    if (collapseRef.current) {
      collapseInstance = new Collapse(collapseRef.current, {
        toggle: false
      });
    }

    // Cleanup instance on component unmount
    return () => {
      collapseInstance?.dispose();
    };
  }, []);

  // Close navbar when user scrolls
  useEffect(() => {
    const handleScroll = () => {
      if (isNavOpen) {
        collapseInstance.hide();
        setIsNavOpen(false);
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [isNavOpen]);

  // Toggle navbar open/closed state
  const toggleNav = () => {
    setIsNavOpen(!isNavOpen);
  };

  // Close navbar when clicking a navigation link
  const closeNavOnLinkClick = () => {
    if (isNavOpen) {
      collapseInstance.hide();
      setIsNavOpen(false);
    }
  };

  return ( <>
    <div className="container-fluid nav_bg">
      <div className='row'>
        <div className="col-10 mx-auto">
          <nav className="navbar navbar-expand-lg bg-[#62aec5] " >
            <div className="container-fluid">
              <NavLink className="navbar-brand" to="/">
                <img src={navlogo} alt=" op" width="150" height="200" className="d-inline-block align-text-top" />
                NanduFinix
              </NavLink>
              <button 
                className="navbar-toggler" 
                type="button" 
                onClick={toggleNav} 
                aria-controls="navbarSupportedContent" 
                aria-expanded={isNavOpen} 
                aria-label="Toggle navigation"
              >
                <span className="navbar-toggler-icon"></span>
              </button>
              <div ref={collapseRef} className="collapse navbar-collapse" id="navbarSupportedContent">
                <ul className="navbar-nav ms-auto mb-2 mb-lg-0">
                  <li className="nav-item">
                    <NavLink onClick={closeNavOnLinkClick} activeClassName='menu_active' exact className="nav-link" aria-current="page" to="/">Home</NavLink>
                  </li>
                  <li className="nav-item">
                    <NavLink onClick={closeNavOnLinkClick} activeClassName='menu_active' className="nav-link" to="About">About</NavLink>
                  </li>
                  <li className="nav-item">
                    <NavLink onClick={closeNavOnLinkClick} activeClassName='menu_active' className="nav-link" to="Question">Question</NavLink>
                  </li>
                  <li className="nav-item"> {/* Fixed typo: clasNames → className */}
                    <NavLink onClick={closeNavOnLinkClick} activeClassName='menu_active' className="nav-link" to="Notes">Notes</NavLink>
                  </li>
                  <li className="nav-item"> {/* Fixed typo: clasNames → className */}
                    <NavLink onClick={closeNavOnLinkClick} activeClassName='menu_active' className="nav-link" to="ContactUs">ContactUs</NavLink>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </> );
};
export default Header;

Key changes here:

• Added state to track if the navbar is open
• Used a ref to access the collapse element and initialize a Bootstrap Collapse instance
• Added a scroll event listener to close the navbar when the user scrolls
• Attached a click handler to each NavLink to close the navbar when a link is clicked
• Fixed clasNames typos in your list items (this was likely causing subtle styling issues too!)

2. Navbar Doesn’t Close When Clicking Nav Links #

The above code already solves this with the closeNavOnLinkClick function. Every time a user clicks a navigation link, it checks if the navbar is open and closes it using the Bootstrap Collapse instance.

3. Hamburger Toggler Icon Blends With Navbar Background #

Bootstrap’s default toggler icon uses a gradient that can blend into custom navbar backgrounds. Let’s fix this by adding custom CSS to set a high-contrast icon color:

Update your Index.css with these styles:

/* Fix hamburger toggler icon color */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Optional: Improve toggler button visibility */
.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5);
}

.navbar-toggler:hover {
  border-color: white;
}

This replaces the default icon with a white stroke (you can adjust rgba(255,255,255,1) to any color that contrasts better with your #62aec5 navbar background).

Give these changes a try, and your Navbar should behave exactly as expected now!

内容的提问来源于stack exchange，提问作者Harsh Anand