Bootstrap+Dreamweaver导航栏图片叠加文本链接问题求助

Hey there! I see you're trying to get the "Tom" text to sit on top of your navbar image instead of next to it—let's sort that out quickly.

The Problem #

Right now, your image and text are both inline elements inside the .navbar-brand link, so Bootstrap's default layout puts them side by side instead of overlapping. To fix this, we need to use positioning to layer the text over the image.

Updated HTML Structure #

First, wrap your text in a dedicated span so we can target it easily, and add a position-relative class to the .navbar-brand (this lets us position the text relative to the brand container):

<nav class="navbar navbar-fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand position-relative" href="index.html">
      <img src="files/button images/swirl 1 11.svg" alt="Swirl icon" width="130" class="d-inline-block align-top">
      <span class="brand-text">Tom</span>
    </a>
  </div>
</nav>

Note: I fixed the space in your image path (files /button → files/button)—that might have been causing the image to fail loading too!

Custom CSS to Overlay Text #

Now add these styles to your custom CSS to position the text directly on top of the image:

body{ 
  background-color:#F00; 
}

nav .navbar-brand {
  position: relative; /* Establishes this as the positioning context for the text */
}

nav .brand-text {
  font-size: 24px;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  background-color: transparent;
  font-style: normal;
  
  /* Position the text over the image */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centers the text perfectly on the image */
  
  /* Optional: Add a text shadow if your image has light areas to make text more readable */
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

Bonus: Responsive Adjustment #

To keep things looking good on smaller screens, add a media query to shrink the text size when needed:

@media (max-width: 576px) {
  nav .brand-text {
    font-size: 18px;
  }
}

That should do it! The text will now sit centered on top of your navbar image, and it'll stay responsive across different screen sizes.

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