≡ Menu

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

Comments on this entry are closed.

  • XFunc_CaRteR January 1, 2012, 8:38 pm

    What do step’s 1 and 2 entail? A link, perhaps?

  • Mikaela Bjerring January 26, 2012, 7:44 am

    How can i make the menu work on klick instead of hover? Ad how can I change the skin and style to the menu?

  • Tim Milligan January 26, 2012, 1:59 pm

    HI Mikaela, Unfortunately that’s not possible without javascipt. I’d suggest looking for wp menu accordion plugins.

    Instructions for styling the nav can be found in the Thesis User Guide: http://diythemes.com/thesis/rtfm/styling-thesis-wordpress-nav-menus-css/