Remove underlining from a Custom Link when hovering over it

Is there a way to remove the blue underline from my custom donate button? I created it by going to Appearance -> Menus -> Custom Link. The issue is that this custom link (donate button) is inheriting the same CSS as the navigation menu items, which I want to change. I've attempted to apply additional CSS,

.horizontal-navigation-bar nav ul li a:after {
  margin-bottom: -1px;                            
}

but haven't had any success. Any assistance would be greatly appreciated.

https://i.stack.imgur.com/Ju2YN.png

P.S. : - (I am working for the client, who has not provided public access to the website, so sharing the URL will not help). Just to note, I am using the UltraPress theme ()

Thanks https://i.stack.imgur.com/iXAdN.png

csswordpress

Answer №1

It appears that the issue lies in targeting the correct element within the code. Without being able to view the code itself, it is challenging to provide a precise solution.

Referring to the template, the element 

ul.navbar-nav>li.menu-item>a:after
dictates the styling of the menu underlines. Removing the below CSS, results in the removal of the underline effect. Therefore, a similar approach may be necessary:

content: '';
display: block;
position: absolute;
bottom: -3px;
height: 2px;

The recommended course of action would be to use developer tools to identify the specific element and its associated style properties.

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

Tips for aligning a cluster of floating buttons at the center in Vuetify:

This is the code I am currently working with: <v-container height="0"> <v-row align="center" justify="center"> <v-hover v-slot:default="{ hover }" v-for="(option, index) in options" ...

htmlcssvue.jsvuetify.js

Combining a standard JSS class with Material-UI's class overrides using the classnames library

I am exploring the method of assigning multiple classes to an element in React by utilizing the classnames package from JedWatson, along with Material-UI's "overriding with classes" technique. For reference, you can see an instance in MUI's docu ...

javascriptcssreactjsmaterial-ui

Utilize Pseudo Elements for Designing a Unique Background Overlay

I am aiming to create a div with a customizable background, and then utilize a pseudo element to generate a semi-transparent white overlay that will lighten the background of the div. The crucial requirement is for the "overlay" to appear beneath the conte ...

htmlcsspseudo-element

Adjust the background color of the arrow in an HTML Select element

My select menu looks different in Firefox compared to Chrome/Edge In Firefox, it displays an "arrow button" https://i.stack.imgur.com/BGFvO.png However, in Chrome/Edge, the arrow button is not present https://i.stack.imgur.com/PXNJn.png Is there a way ...

htmlcssgoogle-chromefirefox

What is the method for choosing multiple IDs using CSS?

Is there a way to target multiple IDs in CSS? For instance: #test_id_*{ } <div id="test_id_10"></div> <div id="test_id_11"></div> ...

css

Changing CSS properties in React

Currently, I am working on a dynamic table component using CSS grid. My goal is to customize the grid-template-columns CSS property. I am familiar with using repeat in CSS to achieve this. However, I am facing a challenge when it comes to dynamically chang ...

cssreactjssass

Using jQuery, you can easily update the value of the nth-child(n) for a cloned element

Looking to duplicate an HTML element and assign new values to its child elements? Here's my current HTML structure: <div id="avator" class="avator" style="display:none"> <label><a href="/cdn-cgi/l/email-protection" class="__cf_email ...

htmljquerycss

Text that is curving around a D3.js pie chart

I am currently working on creating a 3D-Js chart and I would like the pie text to wrap around the pie itself. This is the exact effect that I am trying to achieve: I am facing two main issues: I am currently printing two separate charts (with labels prin ...

javascriptcssd3.jscharts

Maintaining an onExit function in the ui-router framework

I am trying to implement an animation on an element within a page when the user is transitioning out of a state. Here is my current code snippet: { ....., views: { ... }, onExit: function(){ someEle.classList.remove("someClass"); // ...

javascriptcssangularjsangular-ui-router

Revealing elements with AngularJS ng-show directive prior to concealing them

Currently, I am in the process of implementing a slide effect for bootstrap badges to showcase hierarchical data relationships using AngularJS. My goal is to have a slider-effect that smoothly reveals new sub-categories while concealing previously open su ...

javascriptcssangularjstwitter-bootstrap

What is the best way to ensure that the draggable element remains visible on top of all other elements on the screen while being dragged?

Currently, I am working on implementing the drag and drop feature in SAPUI5 Table and Tree Table. In my project, there is a table containing names that need to be draggable, and a Tree Table where these names should be droppable. To achieve this function ...

jquerycssjquery-uisapui5

Can the color of the expanded navigation bar in Bootstrap 4 be customized?

I'm currently in the process of developing a Bootstrap website and was wondering whether it is feasible to add a background color to the expanded navbar specifically on small screens. Feel free to refer to the images below for a visual representation ...

htmlcssbootstrap-4

The margin of the parent container is influencing the margin of the child element

Purple Working on displaying a rectangle shape in a browser using divs in my React project. Everything works fine, but when I add margin to the parent base and then draw the boxes, there's some space between the mouse cursor and the actual box. The ...

javascripthtmlcssreactjs

Enhance your visual content by incorporating text onto images with CSS/Bootstrap5

I'm having trouble getting my rows and columns to display on top of my background image. I've been struggling with this issue for a while now. Any assistance on this matter would be greatly appreciated! I'm fairly new to this, so if it&apos ...

htmlcssbootstrap-5

Creating a box that is connected by lines using JSON data requires several steps. You

I am attempting to dynamically draw a line using the provided JSON data. I have heard that this can be easily achieved with flexbox. Important: I would greatly appreciate a solution involving flexbox This is what I hope to achieve: https://i.stack.imgu ...

javascriptjqueryhtmlcss

Enhancing Image Quality in Microsoft Edge

I'm trying to figure out how to make an image scale with bicubic in MS Edge. Is there a CSS solution or something similar that can change this behavior? Check out this page: On the right side of the page, there are two images with textured backgroun ...

cssmicrosoft-edge

Easiest method to change cursor to 'wait' and then return all elements to their original state

On my website, there are certain CSS classes that define a specific cursor style when hovered over. I am trying to implement a feature where the cursor changes to a "wait" image whenever an AJAX call is initiated on any part of the page, and then reverts b ...

javascriptjquerycss

The CSS3 Animation remains stationary

I've been attempting to animate my block element moving to the left using CSS animation shorthand property, but unfortunately, it's not working as expected. Here is my HTML: <div id="game"> <div id="block">&l ...

htmlcssanimation

Implementing CSS and JS for targeted elements or functions in WordPress

I am currently managing a WordPress WooCommerce website My goal is to implement bootstrap CSS and js specifically for a function on my WooCommerce checkout page. The code I have written is as follows: if( current_user_can('administrator')) { fu ...

phpcsswordpresstwitter-bootstrapwoocommerce

What is the best way to center the 'email promo' text in the top navigation bar alongside the image and other text links?

Struggling with learning CSS and HTML, particularly when it comes to positioning elements on the page. I'm having trouble vertically aligning the elements inside the top nav bar and can't seem to figure out what I'm doing wrong. Any insights ...

htmlcss