custom-toggler in Bootstrap 4. Can't change the background color nor the border color-CodePudding

Sorry folks, I'm such a novice. Bootstrap 4 in Dreamweaver.

Through trial an error, and some help on here, I have managed to fix most of my problems.

Now, for the custom toggler. I found where I can change the color. But it seems only some of the color.

I got the lines yellow, but I can't make the border yellow, nor can I make the button background #0A0A0A.

It looks to me as though I have followed the guidelines I found, but maybe some of my trial and error fouled things up? screenshot of little hamburger with yellow lines, blue border and white background

Here is the CSS I used:

.custom-toggler .navbar-toggler-icon {

background-image: url("data:image/svg xml;charset=utf8,");

}

//change toggler color

.custom-toggler.navbar-toggler {
    border-color: #ffcc00;
}
    
//end change toggler color but I need to change the toggler bg color

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.navbar-toggler:hover, .navbar-toggler:focus {
  text-decoration: none;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: no-repeat center center;
  background-size: 100% 100%;
}

Here is the HTML

 </head>
  <body>
<div ><img src="images/banner7.png" alt="" width="100%" lass="img-fluid"/></div>
<div >
    <div >
       <nav >
<button  type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span ></span> </button>
          <div  id="navbarSupportedContent1">
            <ul >
              <li > <a  href="#">Home<span >(current)</span></a> </li>

Do I need to duplicate and tweek all the instances for nav-light and/or nav-dark to make a complete nav-custom set?

I swear I'll go study more on W3 schools, but I'm really anxious to get this site up soon so I can make a better impression in my job search.

Thanks,
Clare

CodePudding user response：

The appearance of the button is different from when it first presents itself and after I've clicked it. At first, it is hard corners, no white on the border. Then it is rounded with white at the border and the border never went to yellow in the 2nd state. Where are those characteristics designated in the code? What's it even called, the post-click state?

Thanks again!

Pre-Click

Post-Click

CodePudding user response：

Overall, you only have to add two custom classes to your button to change the toggler SVG styling:

.custom-toggler .navbar-toggler {
   color: rgba(255, 255, 255, 0.5);
   border-color: #f3cb06;
   background-color: #0A0A0A;
} 

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg xml;charset=utf8,");
}

Don't forget to add the custom class to your html:

i.e.

<nav  style="background-color: rgb(0, 0, 0);">

If you'd also like to change the button outline, modify the button:focus class.

example 1.

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;  
outline: revert; 
}

example 2

button:focus {
  border: 1px solid black;
  outline-style:ridge;
  outline-color: grey;
}

―

Add border-radius: 0.25rem; to .navbar-toggler to get those rounded corners back.

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

To get rid of the white outline replace .button:focus with the example 2:

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;  
  outline: revert; 
}