Fix responsive toolbar

tnaccarato · Mar 17, 2024 · efecf5b · efecf5b
1 parent 0f8ef9a
commit efecf5b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/static/css/base.css b/static/css/base.css
@@ -72,7 +72,7 @@
 /*Footer*/
 footer {
     position: sticky;
-    bottom: -10vh; /* Negative value to pull it up */
+    bottom: -30vh; /* Negative value to pull it up */
     width: 100%;
     text-align: center;
 }
@@ -109,3 +109,13 @@ body {
     text-decoration: none !important;
 }
 
+@media (max-width: 991px) {
+.navbar-nav .nav-item .form-inline {
+    display: block;
+    text-align: center;
+}
+    .navbar-nav .nav-item .form-inline .btn {
+        width: 100%;
+    text-align: center;
+    }
+}
diff --git a/templates/base.html b/templates/base.html
@@ -10,7 +10,7 @@
         <title>Fakepal - {% block title %}{% endblock title %}</title>
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
         <link rel="stylesheet" href="{% static 'css/base.css' %}">
-    
+
         {% block extra_css %}{% endblock %}
     </head>
     <body>
@@ -74,7 +74,7 @@
 
                 <!-- User controls -->
                 <ul class="navbar-nav ms-auto">
-                    <li class="nav-item">
+                    <li class="nav-item text-center">
                         <a class="nav-link" href="{% url 'payapp:notifications' %}" title="Notifications">
                             {% if unread_notifications_count %}
                                 <span class="badge bg-primary rounded-circle">{{ unread_notifications_count }}</span>
@@ -93,7 +93,7 @@
                         <li class="nav-item">
                             <form action="{% url 'register:logout' %}?next=/webapps2024/" method="post" class="form-inline">
                                 {% csrf_token %}
-                                <button class="btn btn-link link-like-button nav-link" type="submit">Logout</button>
+                                <button class="btn btn-link link-like-button nav-link " type="submit">Logout</button>
                             </form>
                         </li>
                     {% else %}