求助：用CSS移除WordPress移动端导航栏白色盒子

Hey there, let's get that annoying white box on your mobile navigation bar sorted out! I know you can only use the Additional CSS section in WordPress, so here's a targeted solution that won't mess up your desktop layout.

The Problem #

Your site looks great on desktop, but on mobile the navigation bar is showing up as an unwanted white box. We'll use CSS media queries to target only mobile screens and remove that box without affecting other parts of your site.

The Solution #

Copy this code into your Appearance > Customize > Additional CSS section and save it:

/* Remove white box from mobile navigation */
@media (max-width: 768px) {
  /* Targets the mobile navigation container */
  .navbar-collapse {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  /* Uncomment below if the hamburger menu button also has a white background */
  /* .navbar-toggler {
    background-color: transparent !important;
  } */
}

How It Works #

• The @media (max-width: 768px) rule ensures this code only runs on screens smaller than 768px (most smartphones and small tablets).
• background-color: transparent strips away the white background of the navigation container.
• border: none and box-shadow: none eliminate any extra lines or shadows that might be contributing to the boxy appearance.
• If your hamburger menu button itself has a white background, just remove the /* */ around the .navbar-toggler section to apply the fix there too.

Quick Troubleshooting Tip #

If the white box is still visible after adding the code, use your browser's dev tools (press F12, then toggle the mobile view) to inspect the navigation element. Find its exact class name and replace .navbar-collapse with that class in the code above—it should work perfectly then.

内容的提问来源于stack exchange，提问作者Marios T.