Unresponsive Hover Effect on iPad

I've implemented a hover effect on the menu for my one-page website. When a user hovers over a navigation link on desktop, the color changes to #ed1c28.

.nf-navbar .navbar-collapse a:hover {
   color: #ed1c28;
}

Additionally, when a user clicks on a navigation link, the page scrolls down to that section.

$("html, body").animate({
    scrollTop: ($(winHash).offset().top) + "px"
 }, {
    duration: 1000
 });

Everything works fine on desktop, but on iPad, after clicking a nav link, the hover effect stays activated and the color remains #ed1c28 even after the scroll. How can I disable this hover effect on touch devices?

htmlcssipaddevice-compatibility

Answer №1

If you want to make a link active, consider using the following CSS code snippet:

.nf-navbar .navbar-collapse a:active {
   text-decoration: underline;
}

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

Adjust the navigation menu to display or hide as the page is being scrolled

Implementing an offset to display/hide the navigation menu when the page is scrolled 100px. Attempted to modify from lastScroll = 0 to lastScroll = 100 but it did not work as expected. Jquery: Fiddle // Script lastScroll = 0; $(window).on('scroll&ap ...

javascriptjqueryhtmlscrolloffset

Creating a dynamic page footer for a PDF document using Rotativa's content generation capabilities

As I work on generating a PDF, my employer has requested that I add a footer to each page of the document. Currently, the PDF is being created using Rotativa, where an HTML page is converted into a PDF. However, I am facing a challenge in determining the ...

c#htmljquerycssrotativa

What causes Bootstrap to cut off text in buttons?

My button text is getting truncated for some unknown reason. Here is the HTML code: <input class="btn btn-default" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit."/> And this is how it appears: I have tried setting the width in per ...

htmlcsstwitter-bootstrap

What is the best way to make my <div> element expand to fill the entire width of the screen? I attempted setting the width to 100%, but it didn

I need help creating a <div> that spans the entire width of the screen. In my CSS, I have this code: #spacer3 { width:100%; height:300px; } Although it seems like it should work, the div is not extending all the way to the edges of the screen on ...

csshtmlwidthfullscreen

How to design 'Sliding gallery panels' using jQuery and CSS3?

Usually, I know how to start a project with tutorials or some experience, but this time I'm stuck on what to even call it. Simply defining the concept could help me search for the right resources. Here's a quick mockup I put together: I want to ...

jquerycsssliderhtml5-canvaspanel

When you hover over nested HTML-lists in a webpage, make the tree's long text lines expand gracefully using a combination of HTML, CSS

In my Angular 4 application, I have a left div that displays a tree of items as recursive HTML lists. When there is a long text, it gets cut off by the border of the div and a scrollbar appears. I want to have the text expand beyond the border and show in ...

htmlcssangularbootstrap-4

Troubleshooting Bootstrap Social Buttons: Background Color and Hovering Challenges

I've been working with Bootstrap to design social buttons for Facebook and LinkedIn. However, I'm facing an issue where setting the background color to white for the buttons doesn't cover them properly. The white background extends beyond th ...

htmlcssbootstrap-4

"Discover the process of incorporating two HTML files into a single HTML document with the help of

I successfully created both a bar chart and a pie chart using d3.js individually. Now, I am trying to load these charts into another HTML file using jQuery. $(document).ready(function() { console.log("ready!"); $("#piediv").load("file:///usr/local ...

javascriptjqueryhtmld3.js

Issues with HTML5 tag <animate> in Internet Explorer 11

After getting the hang of some HTML basics, I decided to get creative and make an animation. Surprisingly, it works perfectly on my Firefox browser. However, when I tested it on IE 11, it failed to play the animation as expected. Everything is displayed bu ...

htmlinternet-explorer-11

Flexbox properties are being ignored by input fields

Hey there, I'm currently working on a product calculator and need to create 9 input fields organized in 3 rows of three columns. However, when I try to use display: flex and flex-direction: row on the parent div, it doesn't seem to be working as ...

htmlcss

Using jquery, transform json data into html table format

As a beginner in the realm of coding, I am currently experimenting with extracting data from my json file and transforming it into an HTML table. My tool of choice is the Atom code editor, and I am attempting to use JavaScript, specifically jQuery, to it ...

javascriptjqueryhtmljson

Can JSS support creating variables similar to Sass?

Currently, I am developing a project in React and utilizing Material-ui with JSS for styling. In Sass, we have the ability to define variables like $color: rgb(255, 255, 255) for later use. I am curious if it is possible to implement variable usage simi ...

cssmaterial-uithemesjss

Harvesting the local image file

Currently, I have implemented a form that allows users to upload images and crop them. The process flow has been established as follows: 1. User uploads the image 2. Server processes the image and sends it back to the browser 3. User crops the image a ...

phpjavascripthtml

Adjust the size of iCheck jQuery radio buttons

I have implemented the iCheck Plugin for radio buttons in Angular Directive, but I am facing an issue with resizing the radio button to a smaller size. Does anyone have any suggestions or solutions for this? ...

cssangularjsicheck

When triggered by a click, the function gradually fades in and out. It superimposes one image on top of another, but unfortunately, the sizes

Due to different screen sizes, the image does not appear on top of another image exactly. It seems like a new function is needed. One that does not overlap with another image (by clicking the function for a few seconds), but rather replaces it for those fe ...

javascriptcssbuttononclickclick

Overlay displayed on top of a single div element

Trying to implement a loading overlay in an Angular project within a specific div rather than covering the entire page. Here's a Fiddle illustrating my current progress: #loader-wrapper { top: 0; left: 0; width: 100%; height: 100%; ...

htmlcss

Receive a notification when the div element stops scrolling

I am attempting to replicate Android's expandable toolbar within an Angular component. My HTML code appears as follows: <div (scroll)="someScroll($event)"> <div class="toolbar"></div> <div class="body"></div> </d ...

javascripthtmlangularevents

An issue occurred: TypeError - Unable to access the 'subscribe' property of an undefined object during a POST HTTP request in Angular [8]

I'm currently attempting to send data to a REST API using Postman. I am encountering an issue where I receive the error "Cannot read property 'subscribe' of undefined" when making a POST HTTP call, as shown in the console log: https://i.sta ...

javascripthtmlangularangular8

The magic of CSS Pseudo-classes in Inline Styling

For the longest time, I've been under the impression that you cannot include in-line :hover{..} styles to an element. However, recently I stumbled upon this page which showcased examples like this. <a href="http://www.w3.org/" s ...

htmlcss

Is the primary color modification in Bootstrap failing to take effect?

Currently, I am working on a react app and I have successfully integrated Bootstrap React. One of the tasks I wanted to accomplish was changing the primary color from the default blue to a different shade. To do this, I navigated to bootstrap/scss/variabl ...

cssreactjsbootstrap-4