0

So I'm trying to make a navigation bar for a mobile site to mirror the style of iOS 7. It looks fine on my Nexus, but on an iPhone, the elements stack on top of each other due to how small the iPhone screen is (320px).

Here is what the navigation bar looks like currently: JsFiddle

CSS:

#bar-container {
    position: relative;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    overflow: auto;
    margin-bottom: 3em;
    background-color: #fff;
    border-bottom: 1px solid #a1a1a1;
}
#nav {
    width: 50%;
    height: auto;
    margin: 1em 25% 1em 25%;
    padding: 0;
    list-style: none;
    border-bottom: 2px solid #0775FF; 
    border-top: 2px solid #0775FF;
    border-right: 2px solid #0775FF;
    border-left: 2px solid #0775FF;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius:6px;
    text-align: center;
    font-family: Body;
    color: #0775FF;
    vertical-align: middle;
    background-color: #fff;
}
#nav li {
    display: inline-block;
    vertical-align: middle;
    width:160px;
    color: #0775FF;
    font-family: Body;
}
#nav li a {
    display: inline-block;
    width:160px;
    padding: 8px 0px 1px 0px;
    text-decoration: none;
    font-weight: bold;
    color: #0775FF;
    vertical-align: middle;
    text-align: center;
}
#nav li a:hover {
    color: #fff;
    display: inline-block;
    background-color: #0775FF;
}
#nav li.pressed a {
    background-color: #0775FF;
    display: inline-block;
    color: #fff;
}

HTML: 

<div id="bar-container">
  <ul id="nav">
    <li class="pressed"><a href="#">call</a></li>
    <li><a href="#">missed</a></li>
  </ul>
</div>

This is what I want it to like: http://s1.ibtimes.com/sites/www.ibtimes.com/files/styles/v2_article_large/public/2013/06/18/ios-7-phone-recents.PNG

How do I make it work for all screen resolutions?

nmjk
  • 749
  • 3
  • 9
  • 25
Jason
  • 185
  • 1
  • 9
  • possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) – Soumya Jun 27 '13 at 00:39
  • No,I am not concerned with the spacing between the li's. I just want the entire nav bar to scale down for small screens. – Jason Jun 27 '13 at 00:43
  • Just a quick usability tip: mimicking the style of one OS creates a bad user experience for people who use other OSes. – Chris Ferdinandi Jun 27 '13 at 04:18

0 Answers0