I tried it and the list items are all crowded together now. Ugh!
Maybe you were fast to take the code, in the minute I saw I missed the nowrap for the items and edited the post: white-space:nowrap; /******** ADDED */ Please add this and it will spread.
I come to think of the font-family “Lato” used for the nav, maybe your client doesn’t have “Lato” on his system. A quick fix to get the nav in one line could be to make the nav font 1px smaller.
PS Hope the table snippet works now.
That rule was already added. I can see it inside the Web Inspector. It still seems to be crowded.
It looks like the rule #nav li {width:1%;} seems to be causing the problem. Did you mean to write #nav li {width:100%}?
Good, but I thought I placed it on the “a” not on the “li”. Please try the nowrap on the item link instead.
EDIT)
Mind that is not the cause, it should work the same in both places.
I’ve moved that rule to the #nav li a and it still looks inaccurate. Does the width: 1% have anything to do with it?
The li should have the “1%”.
What I see is the cause is the before and after has not been moved to the two end “lis”.
Try move the pseudo elements too as in the code snippet.
That is to make the nav to evenly distribute available extra space to the items, but it only works if the nowrap is applied.
It is the pseudo elements that are corrupting the algorihm. They should have the table-cell display to not corrupt the table algorithm
I think that did the trick! Those pseudo elements where still using the display block instead of table-cell. I appreciate all of your help @Erik_J!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.