Discover the secret to adding a :hover effect to the "Home" tab with 100% width in Bootstrap 5 when the menu is collapsed

For mobile devices, I want the hover effect on the "Home" menu option to extend across the top bar when the navigation bar collapses. This will make the hover color appear behind the toggler button.

Codepen: https://codepen.io/R-P-P/pen/zxOdyJb?editors=1100

.navbar .nav-link {
    padding: 10px 8px 12px 8px !important;
    font-size: 2rem;
    color: White;
}
 .navbar .nav-link:hover {
    color: red; 
}
#nav-home:hover {background-color: #ffffff;} 
<html lang="en">

<head>
<title>Home Hover</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cba9a4a4bfb8bfb9aabb8bfee5f8e5f8">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="75171a1a01060107140535405b465b46">[email protected]</a>/dist/js/bootstrap.bundle.min.js"> 
</script>
</head>
<body>

    <nav class="navbar navbar-expand-xxl navbar-dark row g-0 m-0 p-0" style="background-color: rgb(150 150 150) !important;">
  
    <div class="container m-0 p-0">
       <ul class="navbar-nav me-auto">
        <li class="nav-item" id="nav-home"><a class="nav-link" href="">Home</a></li>
       </ul>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
       <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="navbar-nav me-auto">
        <li class="nav-item"><a class="nav-link" href="">Link</a></li>
        <li class="nav-item"><a class="nav-link" href="">Link</a></li>
      </ul>  
    </div>
  </div>
</nav>
  
</body>
</html>

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

Latest Update

To prevent children elements from inheriting the background color of <nav>, include the following snippet within the media query:

.navbar:hover .navbar-nav,
.navbar:hover .navbar-toggler {
  background-color: rgb(33, 37, 41) !important;
}

Increase specificity using a media query and !important. Despite efforts to enhance the specificity of <nav> without relying on !important, Bootstrap's CSS proves to be rigid. It's advisable to exercise caution with the frequent use of !important, as it can limit future modification options for CSS, HTML, JavaScript, or plugins. Additionally, a new BS class, .bg-dark, has been added to <nav>. In order for .navbar-dark to work correctly, you must also include .bg-dark for the desired background color. The inline style has been removed, but if you prefer an alternative color, simply remove .navbar-dark and .bg-dark, allowing you to set the background color of <nav> through conventional methods (e.g., stylesheets or <style> block without !important). Below is the updated media query along with a demo showcasing the mentioned changes.

@media (min-width: 320px) and (max-width: 767px) {

  .navbar:hover {
    background-color: #ffffff !important;
  }

}


.navbar {
  background-color: rgb(251 152 5);
}

.navbar .nav-link {
  font: 500 19px "roboto", sans-serif;
  color: white;
}

.navbar .nav-link:hover {
  color: white;
}

.navbar-toggler:focus {
  border: 0 !important;
  box-shadow: none !important;
}

.navbar-toggler {
  border: 0 !important;
}

.nav-link {
  padding: 10px 8px 12px 8px !important;
}

#nav-home:hover {
  background-color: #91008b;
}

#nav-link1:hover {
  background-color: #0200ac !important;
}

#nav-link2:hover {
  background-color: #05bd08 !important;
}

@media only screen and (max-width: 1200px) {
  #nav-social-follow {
    text-align: left;
  }

  #nav-social-share {
    text-align: left;
  }
}

@media (min-width: 320px) and (max-width: 767px) {

  .navbar:hover .nav-item:not(#nav-home) {
    background-color: rgb(251 152 5)
  }

  .navbar:hover,
  .navbar:hover .navbar-toggler 
  .row:hover #nav-home {
    background-color: #91008b !important;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8bab7b7acabacaab9a898edf6ebf6eb">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="01636e6e75727573607141342f322f32">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>

  <nav class="navbar navbar-expand-xxl row g-0 m-0 p-0">
    <div class="container m-0 p-0">
      <ul class="navbar-nav me-auto">
        <li class="nav-item" id="nav-home"><a class="nav-link" href="">Home</a></li>
      </ul>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
      <div class="collapse navbar-collapse" id="mynavbar">
        <ul class="navbar-nav me-auto">
          <li class="nav-item" id="nav-link1"><a class="nav-link" href="">Link1</a></li>
          <li class="nav-item" id="nav-link2"><a class="nav-link" href="">Link2</a></li>
        </ul>
      </div>
    </div>
  </nav>

</body>

</html>

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

Unable to adjust hover color for bootstrap 4 navbar-brand class

Check out this code snippet: .navbar-brand a:hover { color: #43cea2 !important; } <a class="navbar-brand" href="#about">Cole Caccamise</a> ...

htmlcssbootstrap-4

Transmitting JSP form data through email via POST method

I have a question that I'm struggling to find the answer to online. I created a basic HTML form within a JSP that includes a 'Enter name' text box and a submit button. I want to know if there's a way to automatically send the POST infor ...

htmljsp

Pass the form data to a Bootstrap modal upon submission of the form

I'm attempting to retrieve form data and convert it to JSON to display in a modal dialog that opens on the Submit button click! This is my progress so far: HTML <form class="form-horizontal" id="configuration-form"> --irrelevant-- <button ...

javascriptjqueryhtmljsontwitter-bootstrap

Unable to get font-face to function properly on IE versions 7 and 8

I'm having trouble getting the font-face to work properly on both IE7 and IE8. This is the code snippet I have used: @font-face { font-family: 'DroidSans'; src: url('fonts/DroidSans.eot'); src: url('fonts/DroidSa ...

cssinternet-explorer-8cross-browserinternet-explorer-7

Adjust the text within the treeview node for proper alignment

My treeview has nodes that display text, but when the length of the text increases, it moves to the next line and starts one place before the upper text, causing alignment issues. Is there a way to use CSS or JavaScript to properly align the text? Regards ...

javascripthtmlcssjquery-ui

Place a PNG image within a div container carousel

Despite my efforts, I have been unable to find an example of what I am trying to achieve. I have a carousel and my goal is to insert a PNG image into the carousel in such a way that it slightly exceeds the top of the div like this: https://i.sstatic.net/M ...

htmlcssbootstrap-4

Cease the act of sending submissions through JavaScript ajax requests

I need to prevent a form submission based on the result of an ajax request... Here is the code I attempted to implement: The chreg() function is supposed to return a boolean value from the ajax request, but it's not working! Javascript: function ch ...

javascripthtmlajaxsubmitreturn

Firefox causing images to have a white border after rendering

My image (.png) has a white border only in Firefox, despite the CSS border property being set to 0. Is there a solution to remove this unwanted border around the image? ...

cssfirefox

I'm looking to create a card carousel using HTML and Bootstrap, but for some reason, the cards are not aligning properly and are stacking

I need assistance with creating cards in a loop at runtime. However, the cards are displaying vertically aligned to each other instead of horizontally as intended. I have already tried using col-md-4 but it did not work. enter code here <div class=&q ...

htmlangularbootstrap-4

Tailwind CSS - when it comes to styling, larger screen media queries are taking precedence over smaller media queries

Currently tackling screen responsiveness issues in a Nextjs + Tailwind CSS project. All Tailwind breakpoints are functioning correctly except for "sm" and below. Snippet of the problematic code: <div className="bg-red-200 sm:bg-white md:bg-gray-70 ...

cssreactjsnext.jstailwind-css

Sending selected options from a dropdown menu to a PHP code in CodeIgniter using Bootstrap

I'm currently working on a project using Codeigniter and Bootstrap. My goal is to create a dropdown menu that can update a status in the database, and then trigger a PHP script through AJAX in the background to execute the change and display a confir ...

phpajaxtwitter-bootstrapcodeigniter

Are radio buttons being hidden beneath a dropdown menu?

My issue is that my placeholder text 2 and placeholder text 4 radio options are overlapping with the drop-down menus on my form. I have tried adding line breaks and searching for solutions online, but I haven't been able to figure out what's caus ...

htmlbootstrap-4

The alignment of my navigation bar is slightly off to the right

Apologies for the strange wording, but I've encountered an issue with my Navigation bar. It should be aligned to the left, but it appears slightly to the right. < html> <header> <h1>Floor 3 </h1> </header> <head&g ...

htmlbootstrap-4

Find the ID of the clicked table row using HTML and JavaScript

Currently, I am trying to implement this code snippet: <td align="center"> <div class="dropdown"> <button onclick="DropdownShow(this)" class="btn btn-default glyphicon glyphicon-picture"></button> <div id="@TableR ...

javascripthtml

The form includes Bootstrap columns and a button, but there is noticeable wasted space within the

This is the form structure I am working with: <form method="GET" action="."> <div class="container-fluid pt-2 px-5 py-3"> <div class="row g-4"> <div class= ...

htmlcssbootstrap-5

Problem with sliding image to the left

Is there a way to slide my image to the left when I click on the right arrow of the image slider? The current behavior is that the current image hides and the next image shows up, but without any sliding animation. $('#image-content img:first' ...

javascriptjqueryhtmlcssslide

Identifying user interaction with a dynamic drop-down menu using extension javascript

I'm currently working on detecting a click event on a list element using JavaScript, with a slight complication. The list element is located within a dropdown menu from a search bar on Quora. www.quora.com - Specifically, I am interested in identifyin ...

javascriptjqueryhtmlcssgoogle-chrome-extension

Why isn't the HTML/CSS width and height adjusting?

<!DOCTYPE html> <html> <head> <title>Demonstration of HTML, CSS, and JavaScript</title> <link rel="stylesheet" href="profilepage.css"> </head> <body> <!-- Begin your code here --> <div ...

htmlcss

Utilizing JQuery within dynamically loaded files through JQuery tab functionality

My initiation into the world of JQuery tabs has begun. I have a basic setup where clicking on a tab loads 3 different PHP files. <div id="info"> <ul id="info-nav"> <li><a href="tab1.php">Tab 1</a></li> ...

phpjquerycss

Issues arise with FullPage2.0.7 when rotating the device, causing the full page sections to triple on Android devices

Currently, I am working on a website homepage managed with fullpage. Here is the code I am using to initialize the fullpage library: $('#eg_homepage').fullpage({ anchors: this.hFullpageAnchors, slidesColor: this.hFullpageSlideColors, ...

jqueryhtmlmobilerotationfullpage.js