5 level sub navigation

peglomaniac

Hi - I have a family tree website and am into the 5th generation.

The sub-navigation on the sidebar in the theme I am using (I have tried several) is not indenting the 5th level. [img]<img src="http://cdn.vanillaforums.com/realmacsoftware.vanillaforums.com/FileUpload/9d/5310fa7ec5d33211822453aa68a2d3.jpg"; />[/img].

Does anyone know of a theme that indents more than 4 levels of sub navigation?

I have tried to attach a photo - hope it worked. If not, the link is bernhardfamilytree.ca/ethan_chabot.html and "Ethan" is Eric's son, so should be indented.

peglomaniac

OK - how do I add an image... that did not work. Sorry.

peglomaniac

Forgive me I feel like such a moron sometimes. The pic is there, I just thought it would go between those IMG tags.

In the photo, the family, starting with the youngest is, Ethan, son of Eric, son of Jean, son of Leona. Each of those persons is indented, until Ethan, who is not, but I would like him to be.

tsilva

You may want to consider using a ZipList stack to display the tree. This accordian list type stack can be nested into each other, in a hierarchical manner.
If you want this as the main navigation, it can be used on a blank theme like Blueball Free Stacks

peglomaniac

Hello tsilva,

I may look at that if I don't find a theme I can just convert the site to. Since it has over 200 pages I'd rather not have to port all the content over. Thank you though, I will take a look at that.

shukapaw

You can add this the theme to make the 5th level indent similar to the first 4:

/* Child Level 4 */


#navcontainer ul ul ul ul ul li { 
}

#navcontainer ul ul ul ul ul a{
	background: none;
	padding: 2px 0 2px 50px;}

#navcontainer ul ul ul ul ul a:hover{

}

You can either place this in the page Inspector > Header > CSS field on EVERY page or add it to the theme's style.css file and it will be added to each page but will require that you republish all files.

you should probably duplicate the theme before modifying it

If you are gonna add it to the styles.css file, place it right beneath the code that looks like this:

/* Child Level 3 */

#navcontainer ul ul ul ul {
}

#navcontainer ul ul ul ul li { 
}

#navcontainer ul ul ul ul a{
	background: none;
	padding: 2px 0 2px 40px;
}

#navcontainer ul ul ul ul a:hover{

}

Hope this helps,

Brian

peglomaniac

That was *extremely* helpful. Very detailed, I appreciate that.

shukapaw

Glad it worked out.

Brian