fontawesome icons size increase on hover in menu

[magicss]

I like the idea of using font-awesome icons in menus. I followed this features page to make place them in the menu.
http://www.themeblvd.com/demo/jumpstart/features/bootstrap-integration/menu-integration/

Then I wanted the fontawesome menu icon to increase in size when hover over.
I added this CSS:
#primary-menu>li>a:hover .sf-sub-indicator, #primary-menu>[class^=”menu-icon-“]> a:hover [class^=”icon-“] {
line-height: 1em;
font-size: 1.5em;
}

It works, but the state does not persist when a child drop-down menu is hovered over.
I have tried to figure out how to apply this CSS to the li or the ul, but I am stuck.
Seems like a good addition to the forums…
Can you help?
Thanks,
-SS

Topic

[Jason Bobich]

In CSS, when you use the “>” between your selectors, it means you’re targeting the elements directly within. So, for example, say you have:

<ul class="my-list">
	<li>Parent Item 1</li>
	<li>Parent Item 2</li>
	<li>Parent Item 3
		<ul>
			<li>Child 1</li>
			<li>Child 2</li>
			<li>Child 3</li>
		</ul>
	</li>
	<li>Parent Item 4</li>
	<li>Parent Item 5</li>
</ul>

If you were to do the following, you’d be targeting all the list items within “my-list” —

ul.my-list li { ...  }

But if you did this, it would target only the Parent level items above and ignore the list items past that first level directly below “my-list” —

ul.my-list > li { ... }

So, looking at the CSS you’re posting, can you now see why it would only effect the top level?

[magicss]

Hi Jason,
Thanks.
It needed that I think.
It also needed this as I worked through it:

#primary-menu li:hover a [class^="icon-"]{
color: green;
font-size: 1.5em;
}

[Author]

Replies