Question

I want to make a navigation menu with 4 buttons using a grid layout. Default my buttons should be filling in all the space of the grid. This is for some reason not the case.. Can anyone point out what is going wrong? Below you can find my code.

<div data-role="page">
  <div data-role="header" data-position="inline">
    <h1>Title</h1>
    <fieldset class="ui-grid-c">
      <div class="ui-block-a">
        <a href="#" data-role="button" data-icon="home" data-iconpos="top">Home</a>
      </div>
      <div class="ui-block-b">
        <a href="#" data-role="button" data-icon="grid" data-iconpos="top">MenuItem2</a>
      </div>
      <div class="ui-block-c">
        <a href="#" data-role="button" data-icon="settings" data-iconpos="top">MenuItem3</a>
      </div>
      <div class="ui-block-d">
        <a href="#" data-role="button" data-icon="info" data-iconpos="top">Info</a>
      </div>
    </fieldset><!-- /ui-grid-a -->
  </div><!-- /header -->
</div><!-- /page -->

Many thanks!

Thijs

Answer 1

Why don’t you use navbar which is used for that type of tasks?
See example: http://jsfiddle.net/JyQqN/