Wayfinder styling issue

Hi,

I want to use the dropdown menu from muddydogpaws.com
( http://www.muddydogpaws.com/development/wayfinder/examples/example-1.html )

But i can’t figure out how to add an empty item after the last toplevel item to fill up the menubar making it as wide as i need. I can’t find a similar post on the forum.

I tried .menu {width: as wide as my content width; background-color: blah;} but that didn’t work.

.menu ul {width: as wide as my content width; background-color: blah;} didn’t work either.

Hope you can help me.

Tyronne

Hi,
We frequently use the CSS Play basic dd stylesheet and modify it as follows:

.menu {width: as wide as the content width;} - the background color is applied to the individual list items.

Then for the .menu ul li a, .menu ul li a:visited elements we specify a width equal to the .menu width divided by the number of list items, taking into account border widths.

We usually end up with extra space which we correct forby using the :first-child psuedo class to adjust the width of the first list item eg

If you are using a multi-level navigation, this will affect the first-child list items, but you can correct for this using .menu ul li:first-child:hover ul li:first-child a{ width:##px;}

You can also use the :last-child psuedo class, but it is not supported by IE7 or IE8

Sometimes it’s not possible to adjust the width of the first-child li, in that case we use the sibling selector to isolate specific list items, eg:

which in this case would select the third sibling list item.

Here is a site we are building where we have used these techniques :

http://www.formulafairness.com/


mconsidine

Hi Mconsidine,

But lets say I don’t have the News&Articles and the Visit our blog items, then I want that part to stay empty, but have the same color as the rest. So i don’t want the items to fill up the width.
_____________ ______________ ________________
|_____1_______|______2_______|________________|

As you can see above, this example website hast just 2 toplevel items. The rest of the menubar should stay empty but have the same background-color as the 2 menu items.

Regards,

Tyronne

The class menu is within a div tag id="topnav" which has a width equal to the page width and a height equal to the .li height.

So when the number of menu items doesn’t completely span it still looks good. If you reload that site you’ll see what I mean (the blog has been unpublished for this purpose ...)

The blog item is still there, but I know what you mean. I tried that too but no success.

Have a look at http://www.thorhelical.nl/index.php?id=2

You will see what I want to achieve.

Right - my colleague republished the link on me ... Anyway, why not make your topnav color equal to #710069 instead of green?

mconsidine

So, you have seen that I have succeeded. I need to change the colors anyway. The mistake I made was that i hadn’t set a height for the topnav div.

Thanks for taking the time to help me.