when someone views this site on a ipad, the top navigation appears like it does when you shrink your browser zoom to 75% and the Contact Us button is dropped down to a second line like the attachment.
how can i get it so that all the navigation items always stay on one line???
The overflow;hidden makes a rectangular block to the side of the previous floated lists and expands to fill the rest of the space on the line. Using text-align:center centers that last item without the need for padding.
You should remember that browsers will render the horizontal width of text at varying sizes depending on the os, font etc. In a line of text there may be up to a difference of 30- 40px in some cases so you also need to allow breathing rom to soake up these differences. Otherwise you oluwle need to put exact width on each of those menu items so that you know they add up and then just center the text within each list item and don’t use any horizontal padding at all.
You can never rely on fluid text + padding + borders to add up to an exact pixel measurement in any browser.
I’m sure it was the right one at the time. I tested it. But I was sorely tempted to use li:last-child anyhow, as I don’t trust WP classes at all. Forgot about the text cetering and no padding on the last item, though.