CODEWITHSUNDEEP
csstwitter-bootstrap
Peter Nunn
Peter Nunn

Reputation: 2302

Meteor, Bootstrap-3, mobile responsive layout

I'm trying to get an app to work nicely with a mobile browser, having got it working well on a normal desktop. I'm just starting out on the responsive layout stuff so am a bit of a newbie here.

I have the bootstrap nav-bar working down to 768px as shown here Above 768px

but at 768px and below it does this

Below 768px

So, I'm obviously missing something in my css but have NO idea how to get the menu to stack as I thought it would automagically at the mobile browser sizes (isn't that what bootstrap is meant to do for me?).

The code being used to generate the menu is

<template name="header">
<div class="navbar navbar-default" role="navigation">
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li><a href="{{pathFor 'home'}}"><i class="glyphicon glyphicon-home"></i></a></li>
    </ul>
    <ul class="nav navbar-nav">
      <li><a href="{{pathFor 'request'}}">Make a request</a></li>
    </ul>
    <ul class="nav navbar-nav">
      <li><a href="{{pathFor 'pack'}}">Packing</a></li>
    </ul>
    <ul class="nav navbar-nav">
      <li><a href="{{pathFor 'admin'}}">Admin</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      {{>loginButtons}}
    </ul>
  </div>
</div>
</template>

Thanks guys, my lack of understanding is glaring I assume.

Peter.

Upvotes: 1

Views: 1259

Answers (2)

AyB
AyB

Reputation: 11665

Bootstrap will do what you are expecting it to, given you use the right tags and classes. For the navbar, you've missed <div class="navbar-header"> which holds the toggle-button to show/hide the menu on smaller viewports. The code looks like:

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
    </button>
</div>

The navbar1 is the id from your .navbar-collapse div.

<div class="navbar-collapse collapse" id="navbar1">

You can also add an anchor tag within the div for adding any logo or brand name:

<a class="navbar-brand" href="#">Logo/Company name here</a>

DEMO (Click on the mobile icon to see it in mobile view)

Upvotes: 1

rubo123
rubo123

Reputation: 186

You need to include the following in your navbar markup;

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
</div>

See the documentation on the navbar here

Upvotes: 3

Related Questions