I have trouble with a very simple Navbar Styling.
All Links should change color when hovering over the Navbar, then change color again when hovered over directly.
The goal is to have the font color black if there is no interaction with the NavBar.
Then change the font color of all navigation items to light grey, when there is hovering over the NavBar, but keeping the font color of the navigation item directly hovered over black.
I’ve had a play using interactions. Hopefully, it’s the desired effect you’re after.
A lot to explain, so might be easier to make a quick video for you.
But in summary here’s what I did:
Removed all of your styling on the following elements:
item, Navigation Items, Navigation Wrap
So I could work with a clean ‘canvas’ to create the interaction
Set a hover state on ‘item’ (nav link) to Black
Set a current state on ‘item’ (nav link) to Yellow (or whatever colour you want. I used yellow to ensure I could see the obvious difference in colour)
Created an interaction on the ‘item’ element with 2 actions: nav-hover-on, nav-hover-off
nav-hover-on will change (item) text colour to Grey, apply to Class and affect siblings with this Class
nav-hover-off will change (item) text colour to Black, apply to Class and affect siblings with this class.
Hi Keiran,
In the projects section, we’d like to hide and unhide other links as you hover or unhover a link item (loading as a collection item). At the moment we have achieved the hiding and unhiding part. However there is a delay in the unhiding.
Hello! I am also trying to change all links color on a Navbar hover. I applied an interaction to the nav link class, but it only changes the background of the nav link and I would like for it to change the background on the entire nav bar. Additionally, I’d like to be able to hover over any part of the Navbar and have the links change color. I’m styling based on Everlanes nav bar: https://www.everlane.com