Trying to find an foundation element...

User 2823310 Photo


Registered User
312 posts

I'm working on this menu for a tutorial, (a few kinks to work out yet).
The live test menu's link
It does a few things like the logo positioning for an RSD title bar hiding the header on small screens and going to an accordion from a drop down sticking on scroll a bunch of stuff like that, I'll get all that stuff better later so anyway...

What I'm trying to locate is the style that is making the drop down text link revert back to blue. When you hover it it takes the white but when the focus goes to the dropped list it goes back to blue so it's inheriting that from somewhere.

I'm assuming it's a default foundation Sass style that didn't get brought in for the RSD css
The a link default color pseudo selector isn't it and or the global selector * on the link color. I was wondering if anyone here can find it, I can't seem to locate it inspecting the link in firebug?

I did find the css repair for the accordion menu arrows (actually borders), but this one is evading me.
User 244626 Photo


Registered User
811 posts

.dropdown.menu .is-active > a
Bootstrap 5 CSS Grid.
User 2823310 Photo


Registered User
312 posts

Beautiful Twinstream, my online inspector wasn't showing it for me.
That css repair fixes it so those drops look proper now.
User 244626 Photo


Registered User
811 posts

Just curious now....am I right to assume that since this is a class that is being added by foundation when the menu item is active that our only recourse is to write a custom css override or use jquery to remove the "is-active" class on load after setting the toggled class "is active" for each menu item to "is-active" with grouped class color settings ?

I have always thought it would be beneficial to be able to add certain classes to a element in the toggled "off" setting (greyed out) on window load since so many transition or animation controls work off the addclass theory principle. The starting state of most is "without" the class to start with. It would be a great feature if workable.

Bootstrap 5 CSS Grid.
User 2823310 Photo


Registered User
312 posts

Well yeah, for the accordion menus there are a few CSS repairs required. I'll have them as I find them on the step by step. So when the sheet cascades it'll take the head css and fix the few items I've found so far. Some you can't fix like the tooltip that could have a work around if we were able to drag the text element which is in a span into a paragraph... but what I'll do with that one is re-write a jQuery one I did for the last software co. I worked at. Make one for RSD if I get time.

That's the problem with the pre-built libraries though, the huge back loading of scripts and generic CSS, but it's a good thing too when you're starting out. The more I've worked with foundation the more I prefer the coffeegrind grid actually. So I'll just keep building with that. Your idea might work if they allowed you to remove default classes but that would open a can of worms. When you build these kinds of engines you are basically at the purview of the library you are applying. The only solution really is to over ride the CSS structure with the cascade, or like you say with jQuery would work. Since that library gets loaded as well along with all the foundation scripts and css.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.