CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
quilkin
quilkin

Reputation: 1447

Bootstrap newbie issues

Just started to try Bootstrap; I have a small amount of HTML and JS experience. Got a basic page working with navbar and tabbed pages but found two issues: a) the top part of each tabbed page is hidden under the navbar; b) the page for 'login' appears first time OK, but then refuses to appears again after other pages have been shown. Code showing issues is on jsfiddle.

<body>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-      target="#navbar" aria-expanded="false" aria-controls="navbar">
                <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="#">BLE Log</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav" role="tablist">
                <li class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab"    aria-controls="home" aria-expanded="true">Home</a></li>
                <li><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#signin" role="tab" id="signin-tab" data-toggle="tab" aria-controls="signin">Sign In</a></li>
            </ul>
        </div>
    </div>
</nav>

<div id="myTabContent" class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledBy="home-tab">
    <div class="container">
        <p>Line 1</p>
        <p>Line 2</p>
        <p>Line 3</p>
        <p>Line 4</p>
        <p>Line 5</p>
    </div>
  </div>
  <div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledBy="profile-tab">
    <div class="container">
        <div class="jumbotron" id="jumbo">
            <p>Line 1</p>
            <p>Line 2</p>
            <h2>Navbar example</h2>
            <p>This example is.....</p>
        </div>
      </div>
  </div>
  <div role="tabpanel" class="tab-pane fade" id="signin" aria-labelledBy="signin-tab">
    <div class="container">
        <form class="form-signin">
            <h3 class="form-signin-heading">Please sign in</h3>
            <label for="inputEmail" class="sr-only">Username or Email address</label>
            <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
            <label for="inputPassword" class="sr-only">Password</label>
            <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
            <div class="checkbox">
                <label>
                    <input type="checkbox" value="remember-me"> Remember me
                </label>
            </div>
            <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
         </form>
      </div>
  </div> 
</div>

Upvotes: 0

Views: 1698

Answers (2)

Christina
Christina

Reputation: 34642

If you use a fixed position navbar, please look at the examples on GetBootstrap.com. You'll notice that the body has a padding-top: equal to or greater than the height of the navbar, that will prevent you from adding margins or padding on each element immediately following it.

body {padding-top:70px;}

If you use the fixed position navbar. The examples/docs explain this.

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

http://getbootstrap.com/components/#navbar

Upvotes: 2

Marcelo
Marcelo

Reputation: 4455

For your first problem, if you change your header to be fixed this causes the element to be taken out of the flow and you need to push down the rest of the content. This is done by adding a top margin or padding to it as such:

#myTabContent { margin-top:70px; }

or

#myTabContent { padding-top:70px; }

Your sign in tab does not work because it is in a different ul than the other choices. If you look a the browser as you use the tabs, you'll notice that as you click choices, the active class gets added to the choice you click and gets cleared from the other choices in the ul. If your choice already has the active class nothing happens. So, when you click the #signin element, the active class does not get removed from the choices in the first ul and vice versa.

To fix this, you would need to change your approach. The two easiest choices are either to merge the two uls into one (this would cause the sign in choice to no longer appear on the right) or change the sign in tab to be some other type of bootstrap element (such as a modal) and show it over the rest of the content.

Additionally, you just have a typo (data-target). This:

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-      target="#navbar" aria-expanded="false" aria-controls="navbar">

Should be this:

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

Here is a live example: http://jsfiddle.net/npk9w0ak/1/

On a side note, don't forget to fork or save your changes on fiddle and such before posting them. Your link goes to a fiddle with different code.

Upvotes: 3

Related Questions