SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    May 2010
    Posts
    219
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    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.

    Screenshot_1.jpg

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,597
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    The menu item drops for me on desktop anyway.

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

    Code:
    #menu-top-nav-menu {
    width: auto !important; /* 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:

    Code:
    .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 */
    }

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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. It should be this one:

    Code:
    #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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,597
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It looks Ralph grabbed the wrong menu item..
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •