logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$15
nav menu not properly displays resizes on ipad

Hello there,

The navigation issue it's only on ipad, safari particular, all seems to work on all other devices.

The nav menu issue for http://www.urimagnation.com is when it loads, the menu items display all way to right and it looks like all overlaps over to next section.

This is our css:
/* NAV */
#nav{ height: 68px;}
#nav_list{ list-style: none; height: 63px; line-height: 63px; margin: 0 auto;}
#nav_list li{ display: inline-block; padding:0 2em;}
#nav_list li.current_page_item{ background: url(images/current_item.png) top center no-repeat;}
#nav_list li a{ color:#fff; text-decoration: none; display: block;}

and the header.php
....
<!-- header -->
<?php wp_nav_menu( array( 'menu' => 'Main Nav', 'menu_id' => 'nav_list', 'container' => 'div', 'container_id' => 'nav',
'container_class' => '', 'depth' => 1) ); ?>

This question has been answered.

attachment image View Attachment

Alf Baez | 12/31/11 at 11:32am Edit

Previous versions of this question: 12/31/11 at 11:57am

(2) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    12/31/11
    12:32pm
    Sébastien | French WordpressDesigner says:

    is it not a problem with display: inline-block; ?

    here :

    #nav_list li{ display: inline-block; padding:0 2em;}




    try to replace
    display: inline-block;

    by
    float: left;



    and just add width:980px; here


    #nav_list {
    
    height: 63px;
    
    line-height: 63px;
    
    list-style: none outside none;
    
    margin: 0 auto;
    
    width: 980px;
    
}

    Previous versions of this answer: 12/31/11 at 12:08pm | 12/31/11 at 12:32pm

    • 12/31/11 1:19pm

      Alf Baez says:

      Sebastein,

      Thanks for your reply and just so you know I did tried your solution as well but it didn't change/progress the issue.

      Cheers
      Alf

  • avatar
    Last edited:
    12/31/11
    12:14pm
    Hai Bui says:

    I also think it may be a problem with display: inline-block;
    But if you only replace display: inline-block; with float:left, the nav items would not be centered so we need a few more tricks:
    Please try this:

    #nav {
    
    float: right;
    
    height: 68px;
    
    left: -50%;
    
}
    
#nav_list {
    
    height: 63px;
    
    left: 50%;
    
    line-height: 63px;
    
    list-style: none outside none;
    
    margin: 0 auto;
    
}
    
#nav_list li {
    
    display: block;
    
    float: left;
    
    padding: 0 2em;
    
}
    
#content {
    
    clear: both;
    
}

    Previous versions of this answer: 12/31/11 at 12:14pm | 12/31/11 at 12:14pm

    • 12/31/11 1:16pm

      Alf Baez says:

      Hai Bui,

      Thanks in advance.

      Your solution progressed this issue a bit, now as shown on screen shot, however, we might have distorted the nav alignment for all other with regular browser. Please check both the attached image and check the site http://www.urimagnation.com

      Cheers
      Alf

      Attached Image

    • 12/31/11 1:38pm

      Hai Bui says:

      I'm sorry a few lines were missing in my last answer. Try this

      #nav {
      
    float: right;
      
    height: 68px;
      
    position:relative;
      
    left: -50%;
      
}
      

      
#nav_list {
      
    height: 63px;
      
    position:relative;
      
    left: 50%;
      
    line-height: 63px;
      
    list-style: none outside none;
      
    margin: 0 auto;
      
}
      

      
#nav_list li {
      
    display: block;
      
    float: left;
      
    padding: 0 2em;
      
}
      

      
#content {
      
    clear: both;
      
}


      If there is one item missing in iPad, you can try reducing the padding:

      
#nav_list li {
      
    display: block;
      
    float: left;
      
    padding: 0 2em;
      
}

    • 12/31/11 2:28pm

      Alf Baez says:

      ok now we call call this issue resolved

      #nav {float: right; height: 68px; position:relative; left: -50%;}
      #nav_list { height: 63px; position:relative; left: 50%; line-height: 63px;list-style: none outside none; margin: 0 auto;}
      #nav_list li { display: block; float: left; padding: 0 1em;}
      #content {clear: both;}

    • 12/31/11 4:14pm

      Alf Baez says:

      All,

      This issue is now closed. Thanks to Hai Bui for the help and solutions provided.
      Now all works, thanks!

      Cheers
      Alf
      http://www.urimagnation.com

    • 01/01/12 2:15am

      Hai Bui says:

      I'm glad I could help. Anyway, I think you may want to increase the padding a little bit, maybe to 1.5em or 1.8em, if you want the nav to fill the space.

      And please vote to award the prize. If you are new to WPquestions, you can check this http://codewi.se/2011/04/22/voting-assign-prize-money/

      BTW, Happy New Year :)

This question has expired.



Christianto voted on this question.



Current status of this question: Completed



Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.