1

I have a navigation menu of 10 items and I am trying to display them nicely using bootstrap, but I can't seem to make it work. Here's my items:

$menu_items = array(
    'Home' => '#',
    'About Us' => '#',
    'Events' => '#'),
    'Tickets' => '#',
    'Hospitality' => '#',
    'News' => '#',
    'Gallery' => '#',
    'Promotions' => '#',
    'Sale' => '#',
    'Contact Us' => '#');

And here's how I am displaying them now:

<div class="container">
    <ul class="row">
        <?php foreach ($menu_items as $menu_item => $menu_link ) {
            if ( $menu_item == "Home" ) {
                echo"<li class='col-lg-offset-1 col-lg-1'> <a href='$menu_link'> $menu_item </a> </li>";
            }
            else {
                echo"<li class='col-lg-1'> <a href='$menu_link'> $menu_item </a> </li>";
            }
        } ?>
    </ul>
</div>

But the thing is.. I want to maximize the whole width of the container so I can't really use an offset. Ideas, anyone?

Suika
  • 660
  • 2
  • 10
  • 30
  • 1
    if you want to use full page's width, then assign wrapper div with `container-fluid` instead of `container` – Mubin Aug 14 '15 at 04:26
  • can you please fiddle it? – Mubin Aug 14 '15 at 04:28
  • This is where grid systems break down. You could set the first and last as being two columns each. Or you could use plain css and set the width of each li to 10%. – duhseekoh Aug 14 '15 at 05:13

1 Answers1

0

as per my comment

<div class="container-fluid">
<!-- <div class="container"> -->
    <ul class="row">
        <?php foreach ($menu_items as $menu_item => $menu_link ) {
            if ( $menu_item == "Home" ) {
                echo"<li class='col-lg-offset-1 col-lg-1'> <a href='$menu_link'> $menu_item </a> </li>";
            }
            else {
                echo"<li class='col-lg-1'> <a href='$menu_link'> $menu_item </a> </li>";
            }
        } ?>
    </ul>
</div>

Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .container-fluid.

if you want some more notes on container vs container-fluid have a look here

Community
  • 1
  • 1
Mubin
  • 4,325
  • 5
  • 33
  • 55
  • This seems like a good fix, thanks. But unfortunately, what I am looking for is something that will make my 10 items maximize the width of my page. However since this solution still uses an offset, everything looks the same. – Suika Aug 14 '15 at 04:41
  • @Suika: I guess you want 10 items to use full page width, so what you'll have to do is, assign first `div` an offset of `1` and rest of `divs` without `offset` http://stackoverflow.com/a/13998370/2558525 – Mubin Aug 14 '15 at 04:53