Some time ago, some helpful person advised how I could get sub menus as deep as I needed them at the time, but I now need to go one level deeper.
This is for a family tree website and the other day the first child in the 6th generation was born. I added her page to my site, but I am not sure how to alter the code to get her page to indent in the menu like it should.
The previous code was / 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{ }
In the current setup, in order for it to work right, the code above has to go into the CSS pane of both the 4th and 5th generation (in my family tree) pages. I tried changing the Child Level 4 to Child level 5 on just the 6th generation person in my family but that did not work. I also tried changing the 4 to a 5 on the 5th and 6th generation, and on the 4th, 5th and 6th generation pages but none of those work. (Because I don’t know how it works in the first place! )
This is how it looks in RapidWeaver and how it looks on the website. Parker should also be indented in the website, because she’s the in 6th generation in our family. (Marinah is her mother.)
Just add another Child Level 6 and add a ul (unordered list) to each #navcontainer which increases t’s indent level like such
/ Child Level 5 / #navcontainer ul ul ul ul ul ul li { } #navcontainer ul ul ul ul ul ul a{ background: none; padding: 2px 0 2px 50px;} #navcontainer ul ul ul ul ul ul a:hover{ }
To increase more levels, repeat process, increase Child Level to 6
Darn - it did help (Parker is indented) but now Marinah (Parker’s mom) is on the same sub-level as her dad Bradley on the website.
I tried adding the code line above to her CSS pane, which did not help, and then to her’s and Brad’s pane, which did not help either.
Here’s the link to Brad’s page. Brad is Marinah’s dad, Marinah is Parker’s mom.
Brad’s page looks right (he’s got 5 kids … Marinah, Tanner, Owen, Eric, April) until you click on Marinah under his tab - then her menu item moves back to be inline with his, which is not correct.
Is that the only page you modified? The rest worked as advertised, so my thinking is you missed a css class or a indent on a name somewhere on the offending page.
Are you pulling the Nav in through @include via php?
OK, I added this code, but it is still broken. Leaving Marinah’s code the way it was and adding the new long string with all the menu items into the CSS pane of Parker’s page, when I click on Marinah, Parker is again aligned with her mom and all her aunts & uncles.
When I click on Parker everybody (his kids and his grandkid Parker) is aligned with Brad. So it’s actually a bit worse.
I’ll leave it like that for a time until you get a chance to see it.
@peglomaniac, my code was flawed, sorry , had a misunderstanding of your site navigation.
And, you put it in the head section when it should have been in the sidebar as unstyled content, no matter this issue is still at hand…
In Child Level 5 css, change the padding from 50px to 60px, your nav indents by 10px per level hence why original style didn’t work as expected.
So, instead of: / Child Level 5 / #navcontainer ul ul ul ul ul ul li { } #navcontainer ul ul ul ul ul ul a{ background: none; padding: 2px 0 2px 50px;} #navcontainer ul ul ul ul ul ul a:hover{ }
should be: / Child Level 5 / #navcontainer ul ul ul ul ul ul li { } #navcontainer ul ul ul ul ul ul a{ background: none; padding: 2px 0 2px 60px;} #navcontainer ul ul ul ul ul ul a:hover{ }
Each incremental sub-nav would have to add a UL to each of the style navcontainer and change the padding by increments of 10
Well, close and I’ll play with it as I understand about the indent. Clicking Marinah, however, still has Parker aligned with her and all her siblings (Parker’s aunts & uncles) but when I click on Parker, I see she’s now indented more. I’ll fiddle with it.
Maybe if I add that code to Marinah too. … I’ll let you know.
All of your navigation CSS should be in your site wide code not your individual page code, that way add once change everywhere, instead of adding to each page individually.
You’re a genious! I added both snippets to the CSS pane in both Parker’s and Marinah’s pages and now it works! I’ll add it to a few select other pages and if nothing breaks, I’ll add it to the site wide code. Thank you SO much!
I added it all the way up to Parker’s great grandmother and nothing broke! I’ll now add in site wide and never again till Parker has a baby!!! But, meantime I am going to play with the future 7th generation so when these little toads start having babies, I’ll be ready for them. I’m SO much obliged!
)
