How to remove the grey box around navbar dropdown menu hovering

Question

I'm customizing the navbar and, while I can change the color of the item when I hover over it, there is a grey box around the item as well. I have tried using in CSS:

.navbar-nav a:hover{
  color: #f51227;
  border: 0px;
  text-decoration: none;
  text-shadow: none;
  box-shadow: none;
}

I've downloaded the bootstrap CSS files, as some of the answers I found, suggested I edit the bootstrap.css file. I have no idea where to look or how I now add this .css file to my .html as I'm using jumbotron as well so I will need that linked and not sure where that is in the .css file or which .css file it is actually in. I got all sorts of .css files from the download. I'm at a loss at this point and at the point I'm going to leave the grey bar there. Any Insight is greatly appreciated.

.navbar-nav a:hover{
      color: #f51227;
      border: 0px;
      text-decoration: none;
      text-shadow: none;
      box-shadow: none;
 }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- Nav bar -->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #FFFEB0;">
  <a class="navbar-brand" href="#" style="color: #f51227;"> MLB </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#"> Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Menu </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" style="background-color: #FFFEB0;" style="text-decoration: none;" style="text-shadow: none;">
          <a class="dropdown-item" href="#"> Burgers </a>
          <a class="dropdown-item" href="#"> Snacks & Salads </a>
          <a class="dropdown-item" href="#"> Sweets </a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#"> Feedback </a>
      </li>
    </ul>
  </div>
</nav>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Answer 1

If you need to remove grey box around navbar (on hover), you need to change your HTML file. You added there some style and there is a problem. I recommend to you to whole styling add to CSS files (not to HTML).

Delete this in your HTML file:

After that, there is a following result on hover:

Answer 2

Are you looking for this, because I am not sure what are you talking about hover and other stuff?

WARNING

Please don't edit bootstrap.css file directly, You can overwrite CSS property of bootstrap by creating new CSS file but directly changes in the root files is not correct

.navbar-nav a:hover{
      color: #f51227;
      border: 0px;
      text-decoration: none;
      text-shadow: none;
      box-shadow: none;
 }
 
li.nav-item.dropdown .dropdown-menu {
  border: none;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- Nav bar -->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #FFFEB0;">
  <a class="navbar-brand" href="#" style="color: #f51227;"> MLB </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#"> Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Menu </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" style="background-color: #FFFEB0;" style="text-decoration: none;" style="text-shadow: none;">
          <a class="dropdown-item" href="#"> Burgers </a>
          <a class="dropdown-item" href="#"> Snacks & Salads </a>
          <a class="dropdown-item" href="#"> Sweets </a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#"> Feedback </a>
      </li>
    </ul>
  </div>
</nav>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Answer 3

Is this what you are after?

.navbar-light .navbar-toggler {
    border: none;
}

Answer 4

I also felt problem with navbar in the past. I solved the problem by clicking the right mouse on the navbar and then clicking on inspect it brought debugging console where I could experiment the item(here navbar) by changing the value of the desired properties. Hope this might help.

Thanks in advance.

Answer 5

you can just remove this class "navbar-light" in your HTML