This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

fontawesome icons size increase on hover in menu

  • Creator
    Topic
  • #7560
    magicss
    Participant

    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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Author
    Replies
  • #7563
    Jason Bobich
    Keymaster

    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?

    #7566
    magicss
    Participant

    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;
    }
Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.