Solid colored fill for the active item in the Bootstrap navbar

As I work on constructing a web page using Bootstrap 5 with a fixed top navbar, I am aiming to have the "active" item highlighted with a solid background color similar to the example shown here.

Upon inspecting the page using developer tools, I noticed that the items do not fully occupy the height of the navbar. Given my limited experience with Bootstrap and my rusty HTML/CSS skills, I am unable to pinpoint the relevant elements to style in order to achieve the desired effect.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f4d40405b5c5b5d4e5f6f1a011d011f">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<div class="container">
  <a class="navbar-brand" href="#">
    <img class src="https://via.placeholder.com/50" alt="Foobar" height="32">
  </a>
  
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
  </button>
    
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav me-auto mb-2 mb-md-0">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Item A #1</a></li>
          <li><a class="dropdown-item" href="#">Item B #2</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="#" role="button" aria-expanded="false">
            Active
        </a>
      </li>
    </ul>
    <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
      <li class="nav-item">
        <a class="nav-link p-2 bi bi-github" href="#" target="_blank" rel="noopener" aria-label="GitHub" style="font-size: 1.2em"></a>
      </li>
    </ul>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0c2cfcfd4d3d4d2c1d0e0958e928e90">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

htmlcsstwitter-bootstrapnavbarbootstrap-5

Answer №1

To start moving in this direction, consider the following:

  1. Utilize the standard navbar layout to have list items at the top level rather than just plain buttons.
  2. Eliminate the padding on the outer element using p-0 to make the list items full height. If desired, other methods can be used to increase the height, like adding vertical padding.
  3. Introduce hover styling with custom CSS. In the example below, a media query is applied to apply the effect only on desktop mode (992px and above).

View the demo in fullscreen mode to observe the outcome.

@media (min-width: 992px) {
  .hover-bg > .nav-item {
    padding: .5rem;
  }
  .hover-bg > .nav-item:hover {
    background: pink;
  }
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a3835352e292e283b2a1a6f7468746a">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg bg-light p-0">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0 hover-bg">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46242929323532342736067368746876">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to Preserve Image Aspect Ratio within a Div Using the 'Overflow: Hidden' CSS Property

I am in the process of creating a profile page that takes inspiration from Facebook's layout design, particularly focusing on the banner and profile image combination. While my implementation looks good on desktop screens, I am facing challenges when ...

htmlcsssass

Having trouble integrating RGraph into my HTML page with AJAX

As I work on developing a simple webpage layout with both a static header and footer, I'm encountering some challenges in updating content dynamically. The left side menu triggers an ajax request when clicked, which should update the text on the right ...

phphtmlajaxrgraph

Creating dynamic and interactive web pages can be achieved by utilizing either $_POST or $_GET with Modal,

In the snippet below, you'll find the HTML code that pulls an array of 6 objects from a database and displays them in a Bootstrap row successfully. <div class="row products"> <?php while($product = mysqli_fetch_assoc($featured)) ...

javascriptphpjqueryajaxhtml

What is the best way to align the items in my navigation bar to the center?

I'm having trouble getting my navbar buttons to appear in the center of the navigation bar. No matter what I try, they only seem to align to the left or right. Can anyone help me figure out how to center them? Here's the CSS code I'm working ...

htmlcssbootstrap-4

"Unfortunately, SimplyScroll isn't functioning properly on this particular page

What is the reason for simplyscroll not being able to handle this div with nested divs? EXTRA INFORMATION The scrolling functionality does not work. Clicking on the buttons doesn't trigger any scrolling. Changing the contents of the div to plain tex ...

javascriptjqueryhtmlsimplyscroll

The setting of background-size: cover does not affect the height of the background image

Looking for a solution to make a background image fill a div entirely? Here is the CSS code you can use: .class{ background-image: url('img.jpg'); background-repeat: no-repeat; background-size: cover; } You can implement this within t ...

htmlcsszurb-foundation

The use of a Bootstrap row is leading to incorrect dimensions for FullPageJS

Within the body tag, I have included the following code snippet: <div id="container"> <div class="section profile"> <div class="row"> <div class="col-sm-6"> A </div> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for triggering a method when clicking instead of using v-for in Vue.js

I need help arranging an array of objects based on their ratings. Currently, I am able to display the items from highest to lowest rating using the v-for method. But, I would like to first display the objects in their original order and then have a button ...

javascripthtmlvue.js

What techniques can be employed to create a fully operational web application using AngularJS?

I have taken on the challenge of understanding AngularJS by creating a webapp. Within my Eclipse environment, I am working with 4 files: main.js, index.html, view1.js, and view2.html. Currently, I can get index.html to load when Tomcat is running. Embedd ...

javascripthtmlangularjseclipseweb-applications

How to dynamically set a background image using Ionic's ngStyle

I've been trying to set a background image on my card using ngStyle Take a look at my code below: <ion-slides slidesPerView="1" centeredSlides (ionSlideWillChange)= "slideChange($event)" [ngStyle]= "{'background-image': 'ur ...

cssangulartypescriptionic-frameworkionic3

Stop the replication of HTML/CSS styles during the extraction of content from a div

Is there a way to prevent the copying of CSS properties, such as font styles and sizes, when content is copied from a div? I want only the plain text to be copied to the clipboard, without any formatting applied. ...

javascripthtmlcss

Halt hovering effect after a set duration using CSS or Vanilla JavaScript

Looking for a way to create a hover effect that lasts for a specific duration before stopping. I want the background to appear for just 1 second, even if the mouse remains hovering. Preferably using CSS or JavaScript only, without jQuery. To see my curren ...

javascriptcsshover

Ways to generate multiple choices for options

Is there a method to provide multiple options within an option? I am utilizing CSelect to create options. One of the options needs to include additional options. <CSelect custom name="select_pattern_filter" id="select_pattern_filter" ...

htmlreactjs

Tips for showcasing personalized validation alerts with jQuery in the HTML5 format?

One of the Javascript functions I designed is for validating file extensions before uploading: function validateFileExtension(field, extensions){ file_extension = field.val().split('.').pop().toLowerCase(); if ($.inArray(file_extension,exten ...

javascriptjqueryhtmlvalidation

Update Laravel to use Bootstrap 4.00 alpha 2 instead of bootstrap-sass 3

Is there a way to accomplish this task by making changes to the package.json file? If so, how would it be done? current: { "private": true, "devDependencies": { "gulp": "^3.9.0", "laravel-elixir": "*", "bootstrap-sass": "^3.0.0" }, "d ...

phptwitter-bootstraplaravelnpm

What is the best way to convert a repetitive string into a reusable function?

I am currently retrieving data from an API and I want to display it on my website in a more user-friendly manner. The challenge I'm facing is that the number of variables I need is constantly changing, along with their corresponding values. So, I&apos ...

javascripthtmljsonapi

Switch out a static image for a dynamic YouTube video using CSS styling

I've been working on customizing a template website, and I want to switch out the current image for a YouTube video. I have the code from YouTube ready to go, but I'm not sure what changes need to be made in the template. Take a look at the CSS ...

htmlcssimagereplaceyoutube

Is there a method to style the parent DIV using CSS when the IDs of the child DIVs are

Similar Question: Looking for a CSS parent selector? If I am unable to modify the HTML file, is it possible to apply CSS styles to the parent DIV using only the ID of the direct child DIV? Here's an example scenario: <div> <div id="c ...

htmlcssdomcss-selectors

Wordpress articles refuse to appear side by side

I've been at it for hours now, trying to solve this issue with no luck. I have a Wordpress loop on my homepage that displays post thumbnails vertically, but I want them to appear in sets of three images before starting a new line. Here's the cod ...

phpcsswordpress

WP How can I modify a particular thumbnail size with a custom CSS class?

I have been attempting to use add_image_size for my custom thumbnail resize, but it seems to be having trouble maintaining the thumbnail size at 220 x 220. Instead, it keeps changing the height to 167 pixels. As a workaround, I am exploring a CSS-based sol ...

csswordpress