Hello all,

I've been messing around with the Foundation menu component "Top bar with animation". When you import it into SD it has only one level of navigation, so I have edited the html and css directly to create a nested menu.

I love the look of it and it works well except for an annoying glitch. Any top level link that points to a submenu has the correct font color I've assigned to it. When you hover over the link all is well, but if you move away, it reverts to the Foundation default blue color for a short transition period while the menu closes. Also, for a second level menu selection pointing to a third level submenu, the background color (but not the font color) also changes to blue if you stop hovering over the link.

I have read up on the Foundation properties, but I can't find anything that assigns color on a focus lost event. If anyone has any ideas, they would be much appreciated! I've attached the html and css for anyone interested.

Thanks kindly.

That is a common problem with that component, it can be fixed using some custom CSS and JavaScript, but it's messy.

You would be better using one of the ready made menu components that are nested.

I'll grab the code for you its not too bad. Eric shared it with me that you can just paste into the header of the page and manage the colors there. I'll post when I get home.

What I did on my menu that I just updated.
Gave the link in the menu an id and used js to add a class to it on hover.

Then some css to the header.


I haven't had time to alter the js for touch devices yet.
I should be able to in the next few days.

Thanks all for the replies and Eric for sending the code. I appreciate the efforts.

Unfortunately, the code doesn't cure the problem I'm having. I think I have implemented it correctly, but I still have a flash of blue after losing focus on the link. I'm not good with js, so I probably screwed something up. Eric, from my understanding of the code you provided, it controls the color of the link with id="override-li-hover" while hovering over it, correct?

Thanks again.

Sorry for the late reply,

I have been using this and adjusting as needed on my menues. Just add that to the header of your page

After messing around some more, I narrowed the issue down to the foundation.min.css file. The blue color (#1779ba) is applied in many instances (58), but two in particular were responsible for the glitches in my menu. After determining this, it was a simple matter to assign the colors I wanted in the menu css file which loads after the foundation file:

.dropdown.menu > li.is-active > a {
background: transparent;
color: #ffffff; }

.menu .is-active > a {
background: #535353;
color: #fefefe; }

This overrides the assignments in the foundation file and everything works perfectly now.

Many thanks to everyone for their input.

Steve,

I just saw your post after I posted. I should have waited longer for your reply, it would have saved several hours of work!

Thanks for the reply though!

Hey Marty,

I would suggest that you still add that to the header of the page so you don't have to edit the foundation.min.css every time you make a change as it will change it back on every export.