[Solved] Nav bar and its pesky width!

[Steven Watson]

Hi guys

I am currently developing a redesign for my workplace website from the HTML 5 Reset Theme on WordPress and I am running into some little annoyances…

Here is the current website and here is my new design that is hosted on my domain for now.

As you can see in the navigation bar, there is a lot of space to the right hand side which I would prefer to fill with the list items within it, I could set the list items to a fixed width but the website is responsive so I don’t know how I would work around that.

Any ideas?

[Paulie_D]

If I understand you correctly, you want the list items to span across the whole width of ul.

Presumably you would want this to be dynamic so that it works regardless of the number of li.

The simplest method is to declare the top-level ul as display:table with width:100% and then the li as display:table-cell instead of float:left.

I’d also throw in text-align center.

I have this lying around: http://jsfiddle.net/KhC94/4/

[Paulie_D]

Ah…did you notice that I specified top-level ul?

You would need to make the li changes specific to the top level ones only.

.menu > li {
font-size: 16px;
display: table-cell;
}

Note the direct child selector

[Paulie_D]

Sounds like a specificity issue.

Have you differentiated between .menu li and .menu > li?

[Paulie_D]

Moderators (and you as the OP) can edit the title of the original post to add the [Solved].

We lost the actual ‘marking’ functionality when Chris switched us to BBPress and it doesn’t seem that this option is available now.

I usually undertake the manual marking on a case by case basis, mostly in CSS Combat because that’s the area where I have the most familiarity.

In the PHP, JS areas etc I have little confidence in my own knowledge to actually be able to tell when something is solved so I leave it well enough alone.

[Author]

Posts