Member Avatar for SabithaSri

How to place navigation above image by using bootstrap

  • 3 Contributors
  • 2 Replies
  • 248 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by seoaceindia

Dani AI

Generated

Short answer: two reliable patterns — put the image in the container as a CSS background, or keep an <img> and absolutely position the navbar on top. asked for code and pointed toward a background approach; the two examples below implement both and note Bootstrap-version differences.

Background-image (clean, responsive)

<header class="masthead">
  <nav class="navbar navbar-expand-lg navbar-dark">
    <!-- brand and links -->
  </nav>
  <!-- optional hero content -->
</header>
.masthead {
  background-image: url('path/to/image.jpg');
  background-size: cover;
  background-position: center;
  min-height: 60vh; /* use vh or min-height for responsiveness */
  position: relative;
}
.masthead .navbar { background: rgba(0,0,0,0.35); } /* optional contrast */

Overlay an <img> (use when the image must be an element)

<div class="hero" style="position:relative;">
  <img src="path/to/image.jpg" alt="hero" class="img-fluid" />
  <nav class="navbar" style="position:absolute; top:0; left:0; right:0; z-index:20;">
    <!-- nav -->
  </nav>
</div>

Notes and quick troubleshooting

  • Ensure the wrapper is position:relative so the absolute nav is positioned correctly.
  • If the nav appears behind the image, increase nav z-index or remove any z-index on the image.
  • For Bootstrap 3 use .img-responsive and .navbar-fixed-top; Bootstrap 4/5 use .img-fluid and .fixed-top (if using fixed). When using a fixed navbar, add page top padding equal to the navbar height so content isn't hidden.
  • Prefer background-size:cover or viewport-based min-height for responsive hero areas, and add a translucent nav background for legibility.

These examples expand on 's background idea and provide the concrete markup requested.

Recommended Answers

All 2 Replies

Member Avatar for UK-1991

Please show us the code what you tried and where is that image you want to place navigation

Member Avatar for seoaceindia

Make it a background instead and set the height of masthead to the height of the image

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.