Thesis 1.x – WP Vertical Nav in Sidebar with Thesis

As of Thesis 1.8.5 this is no longer necessary as widget menus are treated like page widgets.

There’s been a couple people asking how to get a wp vertical nav in their sidebar.  This post covers how to get over the technical css issues, the prettyfication you can do on your own after the fact.

Step 1 – Setup your wp-nav

Step 2 – Add the nav to your sidebar using the Custom Menu widget

Step 2 – Style it so it works, code below.

Adjust the id, highlighted in red to match the id of your menu

<ul id="menu-vertical-menu" class="menu">

The following code fixes the alignment and width issues.

.custom #menu-vertical-menu li {
	float: none;
	position: static;
	margin-bottom:0;
}
.custom #menu-vertical-menu ul, .custom #menu-vertical-menu ul li, .custom #menu-vertical-menu ul a {
	width:auto;
}

This portion of code is for the sub-nav items, makes it into an accordion style menu, you can see how it works when you hover over About:

.custom #menu-vertical-menu li ul {
	display: none;
	margin: 0;
	position: static;
}
.custom #menu-vertical-menu li:hover ul, .custom #menu-vertical-menu a:hover ul, .custom #menu-vertical-menu *:hover ul *:hover ul, .custom #menu-vertical-menu *:hover ul *:hover ul *:hover ul {
	display: block;
}

If you’re using the accordion style and you want the current page to be visible when on a submenu page (Sub About) modify the second part of the css to the following:

.custom #menu-vertical-menu .current_page_parent ul, .custom #menu-vertical-menu .current_page_ancestor ul, .custom #menu-vertical-menu li:hover ul, .custom #menu-vertical-menu a:hover ul, .custom #menu-vertical-menu *:hover ul *:hover ul, .custom #menu-vertical-menu *:hover ul *:hover ul *:hover ul {
	display: block; visibility:visible;
}

The Vertical Menu Test on this site is using the above code.

Originally posted in: http://diythemes.com/forums/showthread.php?60705-Why-does-active-pseudo-class-not-work-in-Thesis-sidebar&p=270612#post270612