1

I need to know how to create a navigation bar with Unsemantic framework (or 960gs).

My menu structure is

<div> <ul> <li></li> </ul> </div>.

I have tried so much, but still can't find out the problem.

EDIT

I use wordpress.So it creates navigation menu. the eventual code rendered in the browser is as follows:

<nav role="navigation" class="clearfix black grid-100 grid-parent mobile-grid-100 mar-top10 mar-bottom10" id="wp_nav_menu_wrapper"> 
<div class="grid-container">
 <div class="menu">
  <ul>
   <li class="page_item page-item-2">
     <a href="http://localhost/wpmarket/?page_id=2">ُSample Page</a>
   </li>
   <li class="page_item page-item-5"><a href="http://localhost/wpmarket/?page_id=5">ُSample Page 2</a>
   </li>
  </ul>
 </div>
</div>
</nav>

While my Wordpress markup is as follows:

<div class='grid-100 height-auto black-gray-bg font-tahoma'>

<nav role='navigation' class='clearfix black grid-100 grid-parent mobile-grid-100 mar-top10 mar-bottom10' id='wp_nav_menu_wrapper'> 
    <div class='grid-container'>
    <?php 

        wp_nav_menu(); 
    ?> 
</div>
</nav>

</div>
John Slegers
  • 45,213
  • 22
  • 199
  • 169
Mostafa Talebi
  • 8,825
  • 16
  • 61
  • 105
  • Out of curiosity? Why did you choose Unsemantic Framework? It doesn't look like a menu structure is a part of their framework? I would suggest using http://getbootstrap.com/ or http://getbootstrap.com/2.3.2/ – khollenbeck Aug 13 '13 at 18:16
  • I have tried Twitter Bootstrao. Regardign responsive design and markup structure, Unsemantic is superb. It does exactly what I need. Specially it default placement is centering of elements than floating left (that Bootstrap does). – Mostafa Talebi Aug 13 '13 at 18:17

1 Answers1

1

The grid-container class is for the outer container and the grid-parent class for inner or nested containers. In your code you have this backwards.

The grid-parent class lets you align self-contained grids with normal grid items. The container holds all of the grid items. So the grid-parent is just an indicator that the or whatever will contain further items related to its scale and ordering on the page.

You can use this structure, or similar:

<nav class="grid-container">
 <ul class="grid-100 grid-parent">
  <li class="grid-25">...</li>
  <li class="grid-25">...</li>
  <li class="grid-25">...</li>
  <li class="grid-25">...</li>
 </ul>
</nav>
user3092907
  • 11
  • 1