移动端与平板端菜单链接适配求助：HTML/CSS原生网站导航失效问题

Hey there! It sounds like your navigation isn’t playing nice on mobile because right now, you’ve got a basic static nav structure—no responsive styling or toggle behavior that’s standard for small screens. Let’s break down how to fix this step by step.

First, let’s look at your current nav code:

<nav>
  <ul>
    <li> <a href="Vspring.html"> Home </a></li>
    <li> <a href="flowers.html"> Flowers </a> </li>
  </ul>
</nav>

By default, this unordered list will either stay horizontal (if you have CSS making it flex or inline-block) or stack awkwardly on mobile, with no way to collapse it if you add more links later. The reference code you saw with <li><a href="#">Contact</a></li> uses # just as a placeholder for a real link—you’d replace that with your actual page URLs like you did for Home/Flowers.

Step 1: Add Responsive CSS for Mobile Layout #

First, let’s make the nav stack vertically on small screens and look clean. Add this CSS to your stylesheet:

/* Base nav styles for desktop */
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.5rem;
}

nav a {
  text-decoration: none;
  color: #333;
  padding: 0.5rem 1rem;
  transition: background 0.2s;
}

nav a:hover {
  background: #f0f0f0;
  border-radius: 4px;
}

/* Mobile-specific styles */
@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
    background: #ffffff;
    position: absolute;
    top: 60px; /* Adjust based on your header's height */
    left: 0;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    /* Hide links by default for toggle functionality */
    display: none;
  }

  nav ul.active {
    display: flex;
  }
}

Step 2: Add a Hamburger Toggle for Mobile Interaction #

To let users open/close the nav on mobile, we need a hamburger button and a tiny bit of JavaScript. Update your HTML to include the button:

<nav>
  <button class="hamburger">☰</button>
  <ul class="nav-links">
    <li> <a href="Vspring.html"> Home </a></li>
    <li> <a href="flowers.html"> Flowers </a> </li>
  </ul>
</nav>

Then add CSS to style and show the hamburger only on mobile:

.hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  color: #333;
}

@media (max-width: 768px) {
  .hamburger {
    display: block;
  }
}

Finally, add this JavaScript to handle the toggle (place it right before your closing </body> tag):

const hamburgerBtn = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');

hamburgerBtn.addEventListener('click', () => {
  navLinks.classList.toggle('active');
});

How This Works #

• On desktop, the nav stays horizontal and behaves like a standard navigation bar.
• On screens smaller than 768px, the hamburger button appears, and the nav links are hidden by default.
• When the user taps the hamburger, the active class is added to the nav links, making them visible in a neat vertical stack.

You can tweak the colors, spacing, breakpoint (768px), and top value in the mobile nav CSS to match your site’s design perfectly.

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