透明导航栏覆盖H1及内容问题已解决，求助Navbar Brand无法扩展与导航栏滚动条异常修复方案

Hey there! Let's sort out that frustrating navbar problem where your brand can't expand properly and an annoying scrollbar keeps popping up. I’ve looked over your code, and there are a few simple tweaks we can make to get this working smoothly.

What’s Causing the Problem? #

Let’s break down the issues in your custom CSS:

• Your .navbar uses display: inline-block, which limits its width to the content inside instead of letting it span the full viewport. This restricts space for your brand to expand.
• The overflow: auto on .navbar is forcing a scrollbar when content doesn’t fit—we don’t need that here.
• The overflow: auto on .navbar a is unnecessary and can mess with the link layout.

Modified CSS to Fix It #

Here’s the adjusted CSS that addresses all these issues:

.navbar {
  position: relative;
  background: #f4f4f4;
  opacity: .6;
  width: 100%;
  padding: 5px 8px;
  z-index: 9999;
  /* Removed display: inline-block and overflow: auto */
}

.navbar-brand {
  color: black;
  font-weight: bold;
  font-size: 300%;
  white-space: nowrap; /* Prevents brand text from wrapping to a new line */
}

.navbar a {
  float: left;
  display: block;
  text-align: center;
  padding: 5px 8px;
  /* Removed overflow: auto */
}

.navbar a:hover {
  background-color: #ede2d4;
}

Why This Works #

1. Removed display: inline-block: The navbar now acts as a full-width block element, giving your brand plenty of space to expand without constraints.
2. Removed overflow: auto: This eliminates the scrollbar entirely—we don’t want to force scrollable content here since we’re making space for the brand instead.
3. Added white-space: nowrap to .navbar-brand: Ensures your brand text stays on a single line, even with a large font size, so it doesn’t wrap and get cut off.
4. Cleaned up .navbar a: Removing the unnecessary overflow property lets links layout naturally without weird constraints.

Bonus: Working with Bootstrap’s Responsive Classes #

You’re already using Bootstrap’s navbar-expand-lg class for responsive collapsing, and this modified CSS plays nice with it. On smaller screens, the toggler will still hide menu items, and your brand will stay fully visible without any issues.

Give this a try, and your navbar should have enough space for the brand, no more scrollbars, and keep that transparent look you wanted!

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