Menu
This is my first post. My website (zidanmarketing.com) is using bootstrap, When the mobile button is active there is a blue border that I am unable to remove. How do I resolve this?
.navbar-toggle:hover,
.navbar-toggle:active,
.navbar-toggle:focus
{
background:none !important;
border-color:none !important;
}
570
Use javascript to add a click event listener on the menu items to close the Collapse navbar.. Or, Use the data-bs-toggle and data-bs-target data attributes in the markup on each link to toggle the Collapse navbar...
To create a collapsible navigation bar, use a button with class="navbar-toggler", data-toggle="collapse" and data-target="#thetarget" . Then wrap the navbar content (links, etc) inside a div element with class="collapse navbar-collapse" , followed by an id that matches the data-target of the button: "thetarget".
For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don't add any .navbar-expand class.
The hamburger toggler color is controlled by the two inbuilt classes used for changing the color of the content in the navigation bar: . navbar-light: This class is used to set the color of the navigation bar content to dark. It will change the toggler icon to have darker lines.
.navbar-toggle {
border: none;
outline: none;
}
For targeting 767px and below, usually where the mobile button triggers try this.
@media (max-width: 767px) {
.navbar-toggle {
border: none;
outline: none;
}
}
try using outline: 0;
The blue outline is a default on pressed buttons on chrome and some other browsers. Outline 0 should have that fixed!
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
