What is the best way to modify the appearance of a :hover state in the navigation bar?

I'm having trouble changing the shape of the hover effect on my navbar social icons. Currently, it covers more space than I'd like:

https://i.sstatic.net/oq25V.jpg

What I want is for the hover effect to only appear on the icon itself, not above or below it.

<li id="menu-item-518" class="fb-icon menu-item menu-item-type-custom menu-item-object-custom menu-item-518"><a title="Facebook" href="https://www.facebook.com/linkhere">Facebook</a></li>

This is the current CSS in my child theme:

/* Social link hover colour */
.fb-icon.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-518 a:hover{
background-color:transparent;
}

Thank you

htmlcsswordpresswordpress-themingparent-child

Answer №1

Consider eliminating padding-top and padding-bottom and substituting them with margin-top and margin-bottom if they are necessary.

For instance, you could try the following:

.custom-icon {
  padding-top: 0;
  padding-bottom: 0;
}

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

Hide CSS background with React onclick

This particular div is responsible for creating a red box. However, my goal is to remove it upon clicking. I attempted to use state to achieve this functionality but unfortunately, it did not work as expected. import React, { Component } from "react"; ...

javascriptcssreactjs

Adjust dimensions of petite structures on expansive sheets

I have a user profile form that is compact in size. The issue is: the form/fields are small but the page itself is large. I don't want these fields to take up the entire page. My solution is to make the fields even smaller. The current layout alloc ...

htmlcssforms

Using CSS to define the pseudo element :after that comes after an input

My HTML code is set and I'm unable to make changes, plus JavaScript isn't an option in this case. That leaves CSS as the only solution. For example, you can see the code here: https://jsfiddle.net/4gKPL/ HTML: <!-- code for input --> <d ...

cssinputpseudo-element

What's the best way to ensure the BODY element occupies the full height of the HTML element?

Currently, I have implemented the sticky footer example code from Twitter Bootstrap. The sticky footer is functioning correctly, but my goal now is to extend the body (or a div) to occupy the remaining space by matching the height of the html element and a ...

htmlcsstwitter-bootstrap

Using HTML to automatically open a URL based on the input entered in a text box

I only have a basic understanding of HTML I am looking to add a feature on my website where users can input their order number into a text box, and it will automatically direct them to the corresponding order summary link. The links to these order summar ...

htmlforms

HTML: Attempting to extract the inner div from the outer div and relocate it outside of the outer div

I am attempting to extract an inner div from an outer div and relocate it outside of the outer div. https://i.stack.imgur.com/NSS7B.png <div class="vc_gitem-zone-mini"> <div class="vc_gitem_row.............."></div> <div> I Would ...

jqueryhtmlcss

Ensure that all images uploaded are adjusted to fit the consistent dimensions within a card

I am in the process of creating a form that allows users to upload various images, which will then be displayed as cards on a website. After uploading an image, the size of the card automatically adjusts to fit the image, ensuring that all cards maintain ...

htmlcssangular

Trouble with card alignment in Bootstrap

I've been experimenting with creating a grid layout using cards and utilizing ng-repeat for generating the cards. Unfortunately, I'm running into an issue where there is no spacing between each card, as depicted in the image. https://i.stack.img ...

htmlcssangularjstwitter-bootstrap

Delivering seamless css integration using express.js

Lately, I've been struggling with serving CSS using Express.js. After some trial and error, I managed to make it work. However, I'm puzzled as to why my new code works while the old one doesn't. Here's the code that now works for me: co ...

javascriptcssexpresspath

What is causing the elements to not be perfectly centered?

I need to display a list of URLs in a single row within a ul element. I attempted to center them on the page using this method, but they ended up slightly off-center. Here's the HTML code: <ul id="links"> <li class="inner-li"><a h ...

htmlcsshtml-lists

Modify the length of an array using a number input field

Currently, I am working with an array that contains objects and I want to dynamically change the number of objects in this array based on user input from a number type input box. Whenever the number in the input box is increased, I need to increase the len ...

javascripthtmlangularjsarrays

What is the best way to retrieve the ids of child divs that are directly beneath a single parent div?

If I have a structure like the one below, I am looking to access each individual div inside its parent div and print its id using a for loop. <div class=abc> <div id="parent"> <div id="one"> <div id=........</div> ...

javahtmlcsscss-selectorsselenium-webdriver

The problem of border-radius bleeding in Webkit when applying -webkit-transform

After creating a basic jQuery script to slowly rotate an image, I encountered an issue where the rotated image would bleed over the border-radius in Chrome. The rotation works smoothly in Firefox 4.0.1 but not in Chrome. To see the example and code, check ...

csswebkit

Saving HTML files can cause formatting issues

After creating a website with the web design tool "Nicepage", I noticed something strange. When visiting the site through this link: It appears to be working perfectly fine (please let me know if it isn't). The layout should resemble this image: htt ...

htmlcssweb

Quick method to assign child iframe title as index.html <title>title</title>

Is there a simple method to dynamically update the <title> of my index.html based on the <title> of a child iframe? Take a look at my website for reference If the content within the iframe changes, will the title automatically update along wi ...

javascriptjqueryhtmliframetitle

Adjust the placement of the outcome on the table using PHP

I am attempting to display 7 results in a table (image 1) and need to adjust their positioning. In the array, Mon = 1 and Sun = 7. Where there are no values, I want them to display as $0. However, I am struggling to move them to the correct spot on the ta ...

phphtmlarrayshtml-table

Is it possible to isolate specific HTML elements within a designated area?

Is it possible to identify which elements are located within a specific rectangular region on a web page identified by a URL? UPDATE: The default settings for screen resolution, font size, etc. can all be adjusted to reasonable values. ...

htmlurlscreen-scrapinghtml-content-extractionlayout-extraction

Tips for incorporating a CSS transition when closing a details tag:

After reviewing these two questions: How To Add CSS3 Transition With HTML5 details/summary tag reveal? How to make <'details'> drop down on mouse hover Here's a new question for you! Issue I am trying to create an animation when t ...

javascriptjqueryhtmlcsstransition

Excessive use of HTML code in website navigation

Having learned in C++ that code repetition is a major warning sign of errors, I find myself conflicted when creating a navigation menu in HTML. It goes against everything I know about writing clean code to have to copy the menu into each page where I wan ...

htmlnavigationredundancy

flask admin template not displaying javascript

Looking for guidance on implementing this template found at https://github.com/secondtruth/startmin. You can view a live demo here: The HTML file functions correctly when opened locally in a web browser, but there seems to be an issue with loading the Ja ...

jqueryhtmlcssflaskbootstrap-4