Area under navbar in Bootstrap

Question

I keep failing to make proper use of a navbar. In my base.html I have this code fragment in the body section. (or should the navbar be in the head?!)

  <body>

          <div class="row">
              <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">

                      <div class="navbar-header">
                          <a class="navbar-brand" href="http://...">Company</a>
                      </div>
                      <div class="navbar-collapse collapse">
                          <ul class="nav navbar-nav navbar-right">
                              <li><a href={{ url_for("strategy_index") }}>Strategies</a></li>
                              <li><a href={{ url_for("data_index") }}>Data</a></li>
                              <li><a href={{ url_for("view_index") }}>Views</a></li>
                          </ul>
                      </div>
              </div>
          </div>



            {% block content %}

            {% endblock %}

  </body>

I then use

{% extends "base.html" %}
{% block content %}
        <div class="row">

         HELLO WORLD

        </div>

{% endblock %}

However, the HELLO WORLD is hidden below the navbar. How can I block the area occupied by the navbar?

Many thanks Thomas

Answer 1

Add

padding-top: 70px;

to your body . It's right there in the documents :

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.

Area under navbar in Bootstrap

Question

1 answers

solution1
1 ACCPTED 2014-04-22 08:42:57

Area under navbar in Bootstrap

Question

1 answers

solution1 1 ACCPTED 2014-04-22 08:42:57

solution1
1 ACCPTED 2014-04-22 08:42:57