CODEWITHSUNDEEP
cssmenubootstrap-5
user3550879
user3550879

Reputation: 3469

Remove Border on Bootstrap 5 navigation-toggler using regular css

I am looking to remove the light grey border on the mobile 'hamburger' menu. I am using font-awesome and Bootstrap 5 (drought in through CDN) to create it, but can't seem to remove the rounded border.

html

    <nav class="navbar navbar-expand-lg navbar-light" role="navigation">
    <div class="container">
    
        <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">
            <i class="fas fa-bars"></i>
        </button>

     ...

css

.navbar-toggler {
  &:focus {
    outline: none;
  }
}

enter image description here

Everything works fine except the border showing: JSfiddle link here:

https://jsfiddle.net/r3q1kLcz/ enter image description here

Upvotes: 1

Views: 3153

Answers (5)

fey_23
fey_23

Reputation: 41

This is my answer:

.navbar-toggler, .navbar-toggler:active, .navbar-toggler:focus{
   border-color: transparent !important;
   box-shadow: none !important;
}

Upvotes: 1

Brijesh Patel
Brijesh Patel

Reputation: 69

No Borders at all.

.navbar-toggler:focus {
    /*Below line will remove the border from the icon
    I have used bootstrap icon here */
    /* This will only remove the shadow effect */
    /* Border is still there */
    /* if you don't want any border then set the property equals to zero */
    border: 0 !important;
    box-shadow: none !important;
  
    /* This will remove the rounded corner(radious-border)
    and give square border */
    /* border-radius: 0 !important; */    
}

.navbar-toggler {
    /* This will completely remove border from the icon */
    /* If you need border for the icon then comment this code */
     border: 0 !important;

    /* if you want to check the border please uncomment below code */
    /* border-color: yellow !important; */
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous">
  </script>

</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark mynav">
    <a class="navbar-brand" href=""> Logo</a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon nti"></span>
        </button>

    <div class="collapse navbar-collapse" id="navbarNav">

      <ul class="navbar-nav ms-auto">
        <li class="navbar-item">
          <a class="nav-link" href="">Contact</a>
        </li>
        <li>
          <a class="nav-link" href="">Pricing</a>
        </li>
        <li>
          <a class="nav-link" href="">Download</a>
        </li>
      </ul>
    </div>
  </nav>
</body>

</html>

Upvotes: 4

Brijesh Patel
Brijesh Patel

Reputation: 69

To remove the round corners(border-radious)

.navbar-toggler:focus {
    /*Below line will remove the border from the icon
    I have used bootstrap icon here */
    /* This will only remove the shadow effect */
    /* Border is still there */
    /* if you don't want any border then set the property equals to zero */
   /* box-shadow: none !important;*/
  
    /* This will remove the rounded corner(radious-border)
    and give square border */
     border-radius: 0 !important;
}

.navbar-toggler {
    /* This will completely remove border from the icon */
    /* If you need border for the icon then comment this code */
    /* border: 0 !important; */

    /* if you want to check the border please uncomment below code */
    /* border-color: yellow !important; */
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous">
  </script>

</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark mynav">
    <a class="navbar-brand" href=""> Logo</a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon nti"></span>
        </button>

    <div class="collapse navbar-collapse" id="navbarNav">

      <ul class="navbar-nav ms-auto">
        <li class="navbar-item">
          <a class="nav-link" href="">Contact</a>
        </li>
        <li>
          <a class="nav-link" href="">Pricing</a>
        </li>
        <li>
          <a class="nav-link" href="">Download</a>
        </li>
      </ul>
    </div>
  </nav>
</body>

</html>
Square border

Upvotes: 0

Brijesh Patel
Brijesh Patel

Reputation: 69

To remove the shadowing effects from the toggle icon:

.navbar-toggler:focus {
    /*Below line will remove the border from the icon
    I have used bootstrap icon here */
    /* This will only remove the shadow effect */
    /* Border is still there */
    /* if you don't want any border then set the property equals to zero */
    box-shadow: none !important;
  
    /* This will remove the rounded corner(radious-border)
    and give square border */
    /* border-radius: 0 !important; */    
}

.navbar-toggler {
    /* This will completely remove border from the icon */
    /* If you need border for the icon then comment this code */
    /* border: 0 !important; */

    /* if you want to check the border please uncomment below code */
    /* border-color: yellow !important; */
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous">
  </script>

</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark mynav">
    <a class="navbar-brand" href=""> Logo</a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon nti"></span>
        </button>

    <div class="collapse navbar-collapse" id="navbarNav">

      <ul class="navbar-nav ms-auto">
        <li class="navbar-item">
          <a class="nav-link" href="">Contact</a>
        </li>
        <li>
          <a class="nav-link" href="">Pricing</a>
        </li>
        <li>
          <a class="nav-link" href="">Download</a>
        </li>
      </ul>
    </div>
  </nav>
</body>

</html>

Remove the shadow effect. Border is still there

Upvotes: 0

Sebastian Tibichi
Sebastian Tibichi

Reputation: 271

enter image description here

You can change from CSS with the following:

.navbar-light .navbar-toggler {
    border-color: transparent !important;
}

Upvotes: 2

Related Questions