Menu tabs are not inline! Please help.

94 Posts

wirkkalaj Reply #1, 15 years, 2 months ago

I'm a little rusty, I haven't worked on my websites in over six months. If you can look at this page http://www.totallychihuahuas.com/ I can't get the menu to line up right, it keeps creating 2 rows now matter how many tabs I have. Here is my wayfinder callout [[Wayfinder?startId=`0` &level=`2` &limit=`5`]]. Any ideas how to fix this easily?

<a href="http://www.themovietimeline.net">The Movie Timeline</a> | <a href="http://www.antstuff.net">The Antfarm Site</a>

793 Posts

ottogal Reply #2, 15 years, 2 months ago

As a first step you should correct the code errors reported by the Validator.

Here is my wayfinder callout

Where is it?

793 Posts

ottogal Reply #3, 15 years, 2 months ago

It's not a problem of the Wayfinder call, but of the CSS.
You need to give an explicite width to the ul element of the menu.
In the file assets/templates/baseline/default.css try this:

#menu ul {
	margin: 0;
	list-style: none;
	line-height: normal;
        width: 960px;
}

94 Posts

wirkkalaj Reply #4, 15 years, 2 months ago

Yeah that worked! I could have swore I tried messing with that one too. Oh well thanks! Now my stupid home tab won't change color like the other tabs..

<a href="http://www.themovietimeline.net">The Movie Timeline</a> | <a href="http://www.antstuff.net">The Antfarm Site</a>

793 Posts

ottogal Reply #5, 15 years, 2 months ago

Now my stupid home tab won't change color like the other tabs..

This is due to the fact that your Home page is parent of the other pages. The class active is applied to the active page and its parent as well.
You could change your tree making the other pages to "sisters" of Home (just change their parent property).
Or you replace the class active by a class self and use the parameter

&selfClass=`self`

This will only affect the actual menu item, not its parent.