nav menu not properly displays resizes on ipad WordPress

• SOLVED

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

Answers (2)

2011-12-31

Hai Bui answers:

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;
}


---

Alf Baez comments:

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