custom-toggler in Bootstrap 4. Can't change the background color nor the border color
Question
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,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(243,203,4,1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
//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 class="container align-content-center"><img src="images/banner7.png" alt="" width="100%" lass="img-fluid"/></div>
<div class="container-fluid">
<div class="container">
<nav class="navbar navbar-expand-sm bg-custom navbar-custom">
<button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="nav justify-content-center">
<li class="nav-item active"> <a class="nav-link" href="#">Home<span class="sr-only">(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
1 answers
solution1
0 2022-12-28 02:01:10
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,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(243,203,6,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
Don't forget to add the custom class to your html:
ie
<nav class="navbar navbar-expand-lg custom-toggler" 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;
}
or
example 2
button:focus {
border: 1px solid black;
outline-style:ridge;
outline-color: grey;
}
solution2
0 2022-12-28 13:35:46
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!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.