Streaming live at 10am (PST)

[Navbar] DropToggle link block hover color resets


#1

Hey guys,

just a small problem over here.

I needed the first element of my dropdown toggle to be linked, therefore i added a link block and styled it correspondingly. But since its a link block it also affects the hover/color behaviour of my drowdown.

When hovering over the first item, everything is okay - lonk block gets :hover -> color: white as it would be with my dropdown-toggle active state. But, when i leave the element it resets the hover color and becomes dark again.

Is there a quick way to set the dropdown toggle to be a link item AND lets the hover color to be active when i m moving my mouse away over the list items? I want it to stay white and become dark again, when the dropdown closes...

Cheers
Daniel


Here is my public share link: LINK
(how to access public share link)


#2

Daniel can you share your read only link?


#3

Sure,

https://preview.webflow.com/preview/currentsandbox?preview=ea038c950dcc26952ed3400a2854f395
http://currentsandbox.webflow.io/

Daniel


#4

Hmm ok that's annoying... Normally you're using the OPEN state of the dropdown element to put the text color, and the text element inside inherits it. BUT in your case you've added a link block, and with Webflow, the way it's done makes it impossible for a link to inherit text color properties of parent elements.


#5

i expected that :stuck_out_tongue_winking_eye:.
But ok then i might have to add a jquery onclick event to update my url to a specific site manually in order to have a "working link anchor workaround".


#6

I would go for a simpler solution maybe, why not styling your text color once and for all, with a dark color for example, then use a couple of 2 light colors for the bg? This way you put the hover on the same element that gets the OPEN state, and you switch the bg color instead.


#7

that indeed has something to do with our internal style definitions and templates :). but since its just a prototype its okay now the way it is :). thanks!


#8

Maybe with custom code. Using the method I described and trying to force the link inside to inherit the text color property of the container. Something like .sub-drop-toggle.w--open a {color:#fff}

Yep it works.


#9

Yeah thats also really nice. Thanks!


#10

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