Question

I’m trying to make a simple navigation that will be served on mobile devices where it is a grid like layout. There are two blocks on one row and there will be 3 rows. There is 5 links so the total number will be odd. Since the number is odd I am trying to make the current page class take up the whole width instead of having two links in a row.

Something like this very crude drawing:

Or if link 3 is the current page:

Currently I have a basic 5 link list. Here is the HTML:

            <nav id="primary_nav">
                <ul>
                    <li><a '. $this->getCurrentPage("contact") .' href="Contact">Contact</a></li>
                    <li><a '. $this->getCurrentPage("portfolio") .' href="Portfolio">Portfolio</a></li>
                    <li><a '. $this->getCurrentPage("resume") .' href="Resume">Resume</a></li>
                    <li><a '. $this->getCurrentPage("bio") .' href="Bio">Bio</a></li>
                    <li><a '. $this->getCurrentPage("index") .' href="Home">Home</a></li>
                </ul>

            </nav>

CSS:

#primary_nav ul {
    list-style: none;
    background: #1c1c1c;
    padding: 5px 0;
}

#primary_nav li a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    letter-spacing: 0.1em;
    line-height: 2em;
    height: 3em;
    border-bottom: 1px solid #383838;
}

#primary_nav li:last-child a {
    border-bottom: none;
}

#primary_nav li a:hover,
#primary_nav li a:focus {
    color: #1c1c1c;
    background: #ccc;
}

Answer 1

Forget javascript, you can do it with css alone (no fancy css3).

Here’s the Html…

<nav id="primary_nav">
  <ul>
      <li><a href="Contact">Contact</a></li>
      <li class="selected"><a href="Portfolio">Portfolio</a></li>
      <li><a href="Resume">Resume</a></li>
      <li><a href="Bio">Bio</a></li>
      <li><a href="Home">Home</a></li>
  </ul>
</nav>​

…and here’s the CSS…

#primary_nav {
    position: relative;
    text-align: center;
}

#primary_nav li {
    float: left;
    width: 50%;
}

#primary_nav li:nth-child(-n+3){
    margin-bottom: 40px; /*must match height set on "primary_nav a"*/
}

#primary_nav .selected {
    position: absolute;
    top: 40px; /*must match height set on "primary_nav a"*/
    width: 100%;
}

#primary_nav a {
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px 10px 6px;
    border: 1px solid #aaa;
    height: 40px; 
}

​
All you need is to add class="selected" to the link referencing the currently selected page.

See it in action at http://jsfiddle.net/joplomacedo/eYJG7/