Navigation issues on ipad

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???

please advise. thanks in advance.

The menu item drops for me on desktop anyway.

One way to help is to remove the width restriction on the UL:

#menu-top-nav-menu {
[COLOR="#FF0000"]width: auto !important;[/COLOR] /* undoes the width rule */
}

But you are really trying to cram a lot into that menu anyhow. A better appraoch is to unfloat the last item, something like this:

.menu-header li.menu-item-11{
    float:none;
    overflow:hidden;
    zoom:1.0;
}

#access a {
padding: 0 8px; /* only use if the UL width is to be kept */
}

Hi,

I would do as Ralph suggests and not float the last item but add text-align:center and remove the padding from the last anchor also.

It looks Ralph grabbed the wrong menu item.:slight_smile: It should be this one:


#menu-top-nav-menu li.menu-item-53{
    float:none;
    overflow:hidden;
    zoom:1.0;
text-align:center;
}
#menu-top-nav-menu li.menu-item-53 a{padding:0}


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. :rolleyes: