Skip to content

R
red_brick_board
Commit bfefa3b5 authored by gab's avatar gab
Browse files
Options

added collapse to navbar

parent ed355c41
Show whitespace changes
Inline Side-by-side
Showing with 35 additions and 7 deletions
redbrickboard/static/css/custom.css
View file @ bfefa3b5
...@@ -27,7 +27,7 @@ body { ...@@ -27,7 +27,7 @@ body {
background-color: var(--theme-bright-red); background-color: var(--theme-bright-red);
color: #fff; color: #fff;
border-color: var(--theme-bright-red); border-color: var(--theme-bright-red);
white-space:nowrap; white-space: nowrap;
} }
.btn-red:hover { .btn-red:hover {
...@@ -38,10 +38,35 @@ body { ...@@ -38,10 +38,35 @@ body {
border-color: var(--theme-prusian-blue); border-color: var(--theme-prusian-blue);
} }
@media (max-width: 950px) {
.navbar-brand {
width: 90%;
}
}
@media (max-width: 780px) {
.navbar-brand {
width: 85%;
}
}
@media (max-width: 560px) {
.navbar-brand {
width: 75%;
}
}
@media (max-width: 425px) {
.navbar-brand {
width: 70%;
}
}
.nav-link { .nav-link {
transition: all 0.3s ease-in; transition: all 0.3s ease-in;
color: var(--theme-bright-red) !important; color: var(--theme-bright-red) !important;
font-size: 1.5vw; font-size: 1.5vw;
white-space: nowrap;
} }
......
redbrickboard/templates/base.html
View file @ bfefa3b5
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
</head> </head>
<body> <body>
<nav class="px-5 navbar navbar-expand navbar-light bg-light"> <nav class="px-5 navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid justify-content-end"> <div class="container-fluid justify-content-end">
<a class="navbar-brand" href="/"> <a class="navbar-brand" href="/">
<img src="{% static '/images/Logo with Name.png' %}" alt="Red Brick Board" style="width:30%; height:auto;"> <img src="{% static '/images/Logo with Name.png' %}" alt="Red Brick Board" style="width:30%; height:auto;">
...@@ -25,10 +25,12 @@ ...@@ -25,10 +25,12 @@
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav"> <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav d-flex"> <ul class="navbar-nav d-flex">
<li class="nav-item">
<a class="nav-link" href="/eventcatalog" style="margin-right: 2.94rem;">Event Catalog</a> <a class="nav-link" href="/eventcatalog" style="margin-right: 2.94rem;">Event Catalog</a>
</li>
<li class="nav-item">
{% if user.is_authenticated %} {% if user.is_authenticated %}
<form role="Log Out" action="{% url 'accounts:logout' %}" method="post"> <form role="Log Out" action="{% url 'accounts:logout' %}" method="post">
{% csrf_token %} {% csrf_token %}
...@@ -40,7 +42,8 @@ ...@@ -40,7 +42,8 @@
<button class="btn btn-red" type="submit">Log In</button> <button class="btn btn-red" type="submit">Log In</button>
</form> </form>
{% endif %} {% endif %}
</div> </li>
</ul>
</div> </div>
</nav> </nav>
{% block content %} {% block content %}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment