Streaming live at 10am (PST)

Changing cursor from hand for Current class navigation links


#1

Hi All,
Sorry if my searching missed the solution. It seems to me if you are at a current page or position on the page and the current class is active, the link should not appear to be active. Since it does show a hand cursor it indeed appears to be active, even though clicking it doesn't do anything (as expected). I have styled these to look inactive, but the hand bothers me since it connotes a clickable link. Is there any way to set the cursor to something else or even to none on current class? Shouldn't it default to that?

Thanks in advance,
John


#2

Hey @jahdakine Great questions.

By default anything that is a link will be given a hand cursor to indicate that it is a link. This is a web standard for CSS and browsers; not a specific Webflow thing.

Most people will use the "current" state to style their links in prominent way in order to tell the user where they are. How prominent depends on the style of the page. In the case of this forum you can see in the upper right corner the word "forums" is underlined with a darker colour then the other menu Items.

The links are in fact clickable and in most cases will refresh the page, so there is some functionality there.

I don't think so based on the default browser behaviour and the way most websites behave. Users expect links to have the hand appear when hovered even if it is the current page.

With all that said you can change the cursor with custom code.

   <style>
        .w--current:hover { 
            cursor:default;
        }
   </style>

Cheers

Alex


#3

Many thanks Alex, that will work. Best not to make it the default then. I will take it up with the W3C wink


#4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.