Instant border color activation for hamburger icon in Bootstrap

Whenever I click on the hamburger icon in a Bootstrap 4 page, it briefly shows a colored border when activated but then disappears. Is there a way to customize this color or remove it completely? You can see exactly what I'm talking about in this unlisted YouTube video: http://youtu.be/kiiYmNM4OIo?hd=1

Answer №1

The outline property is the key here.

To get rid of it, simply assign none to it. Typically used in button:focus triggers.

For instance,

button:focus{outline:none;} /*eliminate the outline completely*/

or

button:focus{outline:5px dashed red;} /*illustration on changing its appearance*/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Facebook's Thumbs Down to My Code

I've been struggling to integrate a Facebook Like button on my blog using the following code: $("#fblike").append(" <iframe src='http://www.facebook.com/plugins/like.php?app_id=217624258276389&amp;" + window.location.href + "&amp;send ...

AngularJS input range is written inside the bubble that crosses over the screen

Is there a way to write inside the bubble of the range slider? I have adjusted the design of the range slider and now I simply want to display the number inside the bubble: Please see image for reference I aim to display the number inside a circle. What ...

Broken image path in the Model-View-Controller framework

When using the jQuery DatePicker plugin in my MVC application, I face an issue with displaying a certain image for the Calendar pop-up. Here is the code snippet: $.datepicker.setDefaults({ showOn: "both", buttonImage: "../images/Calendar.png", ...

How to efficiently utilize jQuery's blur function on input fields containing square brackets[] while utilizing the value from this

Here's a little challenge for some of you: I have input fields with names containing brackets. When one of them receives a value, I want to make an ajax call to query the database and retrieve the corresponding part number to populate the first empty ...

An interactive table with image content designed using Bootstrap for seamless responsiveness

I'm currently developing a Drupal website with a table structure as shown below: table ............. t1 i1 ........... t2 i2 ........... As I am trying to make the table responsive, I would like the structure to appear like this: table .... ...

The issue arises when trying to use ::v-deep in conjunction with v-dialog's content-class when using scoped scss

I've been working on styling the content of the Vuetify dialog component and have been using the content-class prop along with scoped styles to achieve this. Can someone explain the difference between the styles provided below? And also, any tips on h ...

What's the best approach to trigger a Wordpress Audio Player refresh with SmoothState on page transitions?

I have integrated a Wordpress Audio Player using shortcode in the "header.php" file. In addition, I am also utilizing SmoothState for page transitions (). Which function should I use in the "callback" to reload the player on new pages? I have included j ...

Images in emails do not conform to specified height and width parameters in Outlook

Here is the structure of my DOM in HTML content that I am including in an email. <a href="http://content.mindmatrix.net/email/814xjqjmpj5r/b59tqx7tzz2x7" target="_new"> <span style='text-decoration:none;text-underline:none'> <img ...

What causes the event parameter to be lost during recursion?

Below is the given code snippet: <html> <head> <meta charset="UTF-8"> <title>title...</title> <link type="text/css" rel="stylesheet" href="jquery-ui-1.10.4.custom.css" /> <script type="text/javascript" src="jq ...

What is the best way to eliminate the white space between a background image and a flex footer?

Is my background image causing a gap between it and my flexbox sticky footer? I've tried various methods to fix it, but they only seem to create more issues. Can anyone provide assistance? I have created a placeholder image of the same size as my orig ...

Coordinated Universal Time on the Website

I am currently developing a website that will be exclusively accessible through the intranet, but it targets users across Australia. Recently, I have been instructed to explore the idea of incorporating UTC time on the site. I am contemplating how I can i ...

What is the best way to extract the text content of an element in jQuery?

Here's a snippet of HTML code to work with: <label for=name>fill in your name<span>*</span></label>. When using jQuery and calling $("label[for='name']").text(), you will get 'fill in your name*'. The questi ...

I am receiving a high volume of row data from the server. What is the best way to present this information on a redirected page?

There is a scenario where Page 1 receives a substantial amount of row data in JSON format from the server. The goal is to present this information on Page 2, which will be accessed by clicking on Page 1. To accomplish this task, JavaScript/jQuery and PHP ...

Can a CSS class be added to a form_row in Symfony 4 Twig?

Need help with adding a CSS class to the entire form_row in a Symfony 4 twig template! Currently, my code only adds the class to the input tag, but I require it to be added to the parent div container. Here is the current code snippet: {{ form_ ...

Encountering Error 500 with Jquery Min.Map File

ERROR: GET request to http://domain.com/assets/js/jquery-1.10.2.min.map returned a 500 Internal Server Error Can anyone help me figure out what's causing this error? I checked the log files in /var/log/error but couldn't find any information. T ...

Fascinating Technique Implemented on the AIGA Site

While browsing the internet, I stumbled upon a fascinating page that features a unique diagonal slicing effect as you scroll down. I am eager to replicate this effect on my own website, but I can't seem to find any information on how it was done. I ha ...

Attempting to divide the main page into quadrants

I want to split my homepage into four equal images without any scrolling. When you click on the website, I want the four images to expand and cover the entire screen with no scrollbars. I've made some progress with my code, but it's not quite the ...

A step-by-step guide on implementing img source binding in Vue.js

<template> <div class="text-center"> <h1 class="display-4 my-5"><mark>GIGS</mark></h1> <b-container fluid="lg"> <b-row class="mx-auto"> <b-col lg="4" class=" ...

Safari does not support the use of nth-child

My CSS code is functioning properly in Firefox and Chrome but not in Safari (5.1). Even though I have confirmed that Safari supports nth-child, it still does not work. Can someone please help me identify what I'm doing wrong? CSS: option:nth-child ...

Ways to retrieve every element inside a specific div container

Is there a way to select all elements inside a div except for specific ones? For example, consider the following structure: <div id="abc"> <div class="def"> sagar patil</div> <div class="pqr"> patil</div& ...