Within a div on my wordpress site, the logo is prominently displayed.
Feel free to check it out here:
Strange issue - whenever I click on the logo, a large rectangular box suddenly appears. I've experimented with the outline and user-select properties without success in removing it.
Sections of your code that are relevant, as shown below for future reference, require the inclusion of the following CSS:
.custom-logo-link:focus {
outline: none;
}
When the custom-logo-link is currently focused, the following CSS is applied:
@media only screen and (min-width: 768px)
a:focus, button:focus, .button.alt:focus, input:focus, textarea:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus {
outline-color: #7c7235;
}
a:focus, button:focus, .button.alt:focus, input:focus, textarea:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus {
outline-color: #7c7235;
}
a:focus, input:focus, textarea:focus, button:focus {
outline: 2px solid #96588a;
}
Additionally, the default :focus from Chrome.
Your existing (old) code:
/**
* Header
*/
.site-header {
background-color: #2c2d33;
padding-top: 1.618em;
padding-bottom: 1.618em;
color: #9aa0a7;
background-position: center center;
position: relative;
z-index: 999;
border-bottom: 1px solid transparent; }
.site-header .site-logo-anchor,
.site-header .site-logo-link,
.site-header .custom-logo-link {
display: block;
margin-bottom: 0; }
.site-header .site-logo-anchor img,
.site-header .site-logo-link img,
.site-header .custom-logo-link img {
width: 100%;
max-width: 210px; }
.site-header .widget {
margin-bottom: 0; }
.home.blog .site-header,
.home.page:not(.page-template-template-homepage) .site-header,
.home.post-type-archive-product .site-header {
margin-bottom: 4.235801032em; }
.no-wc-breadcrumb .site-header {
margin-bottom: 4.235801032em; }
.no-wc-breadcrumb.page-template-template-homepage .site-header {
margin-bottom: 0; }
.header-widget-region {
position: relative;
z-index: 99; }
.site-branding {
float: left;
margin-bottom: 0;
width: calc( 100% - 120px); }
.site-branding .site-title {
font-size: 2em;
letter-spacing: -1px;
margin: 0; }
.site-branding .site-title a {
font-weight: 700; }
.site-branding .site-description {
font-size: 0.875em;
display: none; }
.site-branding .logo {
margin: 0; }<div class="site-branding">
<a href="https://www.jbaat.com/" class="custom-logo-link" rel="home"><img width="616" height="626" src="https://www.jbaat.com/wp-content/uploads/2019/12/Logo-Jbaat-in-circle.png" class="custom-logo" alt="Logo Jbaat in circle" srcset="https://www.jbaat.com/wp-content/uploads/2019/12/Logo-Jbaat-in-circle.png 616w, https://www.jbaat.com/wp-content/uploads/2019/12/Logo-Jbaat-in-circle-295x300.png 295w, https://www.jbaat.com/wp-content/uploads/2019/12/Logo-Jbaat-in-circle-416x423.png 416w" sizes="(max-width: 616px) 100vw, 616px"></a></div>I am currently in the process of trying to showcase a paragraph of text (content) from django. However, my aim is to incorporate <span class="modify"> into particular words that match pre-defined words located within a referenceList within the paragr ...
My current project involves developing a Single Page Application using ReactJs and CSS grid layouts for styling components. However, I've encountered an issue where the two technologies do not seamlessly integrate: CSS grid layouts are typically appli ...
Hello, I'm trying to replicate the same animation effect as seen on these websites: and . Specifically, when hovering over the "selected works" section, an image is displayed. I suspect it's using a JavaScript library, but I can't seem to i ...
I have created a form in HTML with basic verification. Here is the code: <form class="" action="submit/save" method="POST" enctype="multipart/form-data" id="submit_form"> <input class="form- ...
Dealing with Angular in this situation, my goal is to have an image or video displayed inside a tooltip when hovering over specific content. However, there seems to be a flickering effect before the image renders, making the transition less smooth compared ...
I'm currently diving into the world of d3 and attempting to create a map using leaflet. Within my dataset, I have thousands of latitude and longitude coordinates. While I've successfully plotted circles on a leaflet map in d3, I'm now faced ...
Using Bootstrap and additional CSS for styling has been working well, except for the issue with the Dropdown Menu not displaying its content on hover. Within the head tag, the following scripts are included: <!--Jquery--> <script type="text ...
I utilized jQuery to create an animation effect: http://jsfiddle.net/rxCDU/ UPDATE: Please note that this effect is optimized for Chrome browsers! The animation works correctly, however, the green SPAN element moves out of the red DIV only after the ani ...
Initially, I use JavaScript to multiply the div but then encounter issues with the function not working properly. function setDoorCount(count) { $('.doors').html(''); for (var i = 0; i < count; i++) { var content = " ...
I am currently in the process of developing a small web application that will retrieve data from a specific row in a database on a WordPress based website. This data will be used to populate an announcers section for a radio station on another website. Th ...
On one of my pages, I have the following code: <form method="get" action="client_specific_task.php"> <input type="hidden" value="x" /> <input type="submit" value="Add Client-Specific Task"> </form> The client_specific_task.php fil ...
Hello there. I've encountered an issue with making a field in the checkout billing form required on my WooCommerce shop. This is the customization I have made: 'city' => array( 'label' => __( 'City Name&apo ...
Looking for advice on making a popup responsive. Currently experiencing an issue where the buttons go off-screen when adjusting window size, even after using percentages in CSS instead of pixels. Any suggestions? CSS: .modal { display: none; posi ...
I'm looking to use "collapsible bootstrap panels" to display a list, but I've run into an issue where certain panels don't align correctly when opened. For example, when I open the first panel in my code, all other panels shift down and sta ...
Looking for a solution specifically for iOS Safari Using -webkit-overflow-scrolling: touch seems to disrupt the 3d perspective on iOS devices. Check out the demonstration on CodePen. HTML <div class="pers"> <div class="scroll"> <di ...
The following jQuery function is used to replace CSS files: function UpdateTheme(theme) { var links = $("link"); var _t = theme; $.each(links, function (i, link) { var _h = $(link).attr('href'); _updatedHr ...
For my current project, I am making some customizations to the WooCommerce features. Specifically, I have set up two "shipping methods": 1. delivery 2. take away In addition, I have included a custom field on the checkout page which is a <select& ...
I discovered this script on the W3 school website. <script> $(document).ready(function(){ setInterval(function(){ $("#div1").load("demo_test.txt"); }, 30000); // Load demo_test.txt every 30 seconds }); </script> The purpose of ...
I am currently facing an issue where my map screen is not covering the whole screen, leaving a blank space at the bottom where the custom bottom navigator should be displayed. How can I adjust my code so that the map covers this blank space at the bottom? ...
Exploring different methods to achieve my goal, I am wondering if creating a web service where users can track visited countries on a world map can be done in a simpler way than using Javascript or Ajax. The idea is for users to mark the countries they hav ...