0
Context: I’m using Bootstrap as a framework for the interface and Django part for the business rules and database access part of a website I’m developing.
The problem: I have two navbar, one for the top menu and one for the footer. However, when I add content just below the navbar, the content is hidden behind the navbar. But this only happens in firefox.
I’ve already added padding-top on the tag container where the content will be just below the navbar, but the content is not behind the navbar. I’ve also used the -Moz, @-Moz-Document and z-index but nothing happened.
Html code of the page in question:
<!DOCTYPE html>
{% load static %}
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LEDS - Laborátorio de Sistemas Embarcados e Distribuidos</title>
<script src="{% static 'bootstrap-3.3.2/js/jquery-1.11.2.js' %}"></script>
<link href="{% static 'bootstrap-3.3.2/css/bootstrap.css' %}" rel="stylesheet">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
</head>
{# class gradiente deixa o background padrao com duas cores do topo pro bottom#}
<body class="gradient">
<!-- NAVBAR
================================================== -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="col-md-2">
<a href="{% url 'core:home' %}">
<img data-holder-rendered="true" src="/media/customLogo2.png" class="featurette-image img-responsive"
data-src="holder.js/500x500/auto" alt="300x80"></a>
</div>
<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="{% url 'core:home' %}">Home</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">LEDS <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Projetos</a></li>
<li><a href="#">Publicações</a></li>
<li><a href="{% url 'documentos-tecnicos:documentos_tecnicos' %}">Documentos</a></li>
</ul>
</li>
<li><a href="#">Eventos</a></li>
<li><a href="#">Contatos</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Quem Somos<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Associados</a></li>
<li><a href="#">Parceiros</a></li>
<li><a href="#">O laboratório</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
{% if user.is_authenticated %}
<p class="navbar-text">Bem vindo, {{ user }}</p>
<li class="active"><a href="{% url 'contas:logout' %}">Sair <span class="sr-only">(current)</span></a></li>
{% else %}
<p class="navbar-text">Usuario</p>
<li class="active"><a href="{% url 'contas:login' %}">Login <span class="sr-only">(current)</span></a></li>
{% endif %}
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<h2>DOCUMENTOS TÉCNICOS</h2>
<form>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
</form>
</div>
</div>
<footer class="modal-footer navbar-fixed-bottom">
<div class="container">
<p class="text-muted">Instituto (CNPJ: /0010-36)</p>
<p class="text-muted">Rod. . CEP: 60 | Fone: 6-8100</p>
</div>
</footer>
<script src="{% static 'bootstrap-3.3.2/js/bootstrap.js' %}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{% static 'bootstrap-3.3.2/js/bootstrap.min.js' %}"></script>
</body>
</html>None of the Bootstrap classes I used in the navbar and content were changed.
still not working on firefox, but on Chrome it worked.
– 4ndr3
@4ndr3 But the above example works? I am in Firefox 36.0.4 on Windows 7, and see no problem at all. Maybe there is some different detail in your code, I don’t know... (or when Django populated the templates something important has changed - here I only have access to basic HTML) Try inspecting the elements in Firefox’s Developer, see if the CSS rule has been applied correctly, if another rule took precedence, etc.
– mgibsonbr
The example didn’t work, I already inspected the Firefox Bugger and the CSS rule was not applied.
– 4ndr3