locked
Styling Current Navigation RRS feed

  • Question

  • I set up current navigation to use flyouts. The first level shows and second level flies out when level 1 is hovered. This works and I am happy with this. What I want to do is to style the links for level 1 such that not all are bold. Currently, level 1 is bold and level 2 is regular. This looked nice before switching to flyouts. I want only level 1 links with a level 2 flyout to be bold. I tried changing the links not having level 2 from a heading to a link. This did not help. SharePoint treats all level one links the same. I even tried looking for a div or ID that might differentiate the different types of level 1 links and found nothing.

    I checked the code and all of the level 1 links are using the style .LeftNav1. Is there any way to add a second CSS style and some conditional code to help SharePoint know which style to use?

    Mike

    Thursday, November 13, 2014 3:24 PM

Answers

  • Mike,

    The <li> parent of menu items that have a flyout should include a class, .dynamic-children, i.e.

    <ul class="static">
    	<li class="static dynamic-children">
    		<a class="static dynamic-children selected menu-item" href="#">
    			link
    		</a>
    		<ul class="dynamic" />
    	</li>
    	<li class="static"/>
    	...
    </ul>

    Both SP 2010 and 2013 OOTB create a similar nav structure.

    Let's look at the following css:

    <style>
    	.menu-item {
    		font-weight: bold;
    	}
    	.dynamic-children > .menu-item {
    		font-weight: normal;
    	}
    </style>
    This is saying that all tags with class menu-item should be bold while those menu-item's that have a direct parent that has a class dynamic-children should not be bold. Hopefully you can find a similar parent container class and similar css as above to get the outcome you require.


    Eric Overfield - PixelMill - ericoverfield.com - @EricOverfield

    • Marked as answer by JasonGuo Friday, November 21, 2014 10:49 AM
    Friday, November 14, 2014 5:32 AM