Put <nav> into a div with a nicer-displaying bottom margin.

This commit is contained in:
Audrey Roy Greenfeld 2015-08-30 15:41:46 -07:00
parent 243e823a2e
commit 139deaf6b8
3 changed files with 36 additions and 24 deletions

View File

@ -32,3 +32,8 @@
background-color: #f2dede; background-color: #f2dede;
border-color: #eed3d7; border-color: #eed3d7;
} }
/* line 36, ../sass/project.scss */
.navbar-header {
margin-bottom: 3rem;
}

View File

@ -31,3 +31,8 @@
background-color: #f2dede; background-color: #f2dede;
border-color: #eed3d7; border-color: #eed3d7;
} }
// Give header a nice bottom margin
.navbar-header {
margin-bottom: 3rem;
}

View File

@ -30,33 +30,35 @@
</head> </head>
<body> <body>
<nav class="navbar navbar-dark navbar-static-top bg-inverse"> <div class="navbar-header">
<div class="container"> <nav class="navbar navbar-dark navbar-static-top bg-inverse">
<a class="navbar-brand" href="/">{% endraw %}{{ cookiecutter.project_name }}{% raw %}</a> <div class="container">
<button type="button" class="navbar-toggler hidden-sm-up pull-right" data-toggle="collapse" data-target="#bs-navbar-collapse-1"> <a class="navbar-brand" href="/">{% endraw %}{{ cookiecutter.project_name }}{% raw %}</a>
&#9776; <button type="button" class="navbar-toggler hidden-sm-up pull-right" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
</button> &#9776;
</button>
<!-- Collect the nav links, forms, and other content for toggling --> <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-toggleable-xs" id="bs-navbar-collapse-1"> <div class="collapse navbar-toggleable-xs" id="bs-navbar-collapse-1">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link" href="{% url 'home' %}">Home</a></li> <li class="nav-item"><a class="nav-link" href="{% url 'home' %}">Home</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'about' %}">About</a></li> <li class="nav-item"><a class="nav-link" href="{% url 'about' %}">About</a></li>
</ul> </ul>
<ul class="nav navbar-nav pull-right"> <ul class="nav navbar-nav pull-right">
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}
<li class="nav-item"><a class="nav-link" href="{% url 'users:detail' request.user.username %}">{% trans "My Profile" %}</a></li> <li class="nav-item"><a class="nav-link" href="{% url 'users:detail' request.user.username %}">{% trans "My Profile" %}</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'account_logout' %}">{% trans "Logout" %}</a></li> <li class="nav-item"><a class="nav-link" href="{% url 'account_logout' %}">{% trans "Logout" %}</a></li>
{% else %} {% else %}
<li class="nav-item"><a class="nav-link" href="{% url 'account_signup' %}">{% trans "Sign Up" %}</a></li> <li class="nav-item"><a class="nav-link" href="{% url 'account_signup' %}">{% trans "Sign Up" %}</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'account_login' %}">{% trans "Log In" %}</a></li> <li class="nav-item"><a class="nav-link" href="{% url 'account_login' %}">{% trans "Log In" %}</a></li>
{% endif %} {% endif %}
</ul> </ul>
</div>
</div> </div>
</div> </nav>
</nav> </div>
<div class="container"> <div class="container">