Try to fix bottom navbar positioning [#7]

jftsang · Sep 7, 2024 · 88c28cc · 88c28cc
1 parent e495561
commit 88c28cc
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 36 deletions.
diff --git a/static/styles.css b/static/styles.css
@@ -20,10 +20,13 @@ h2 {
 }
 
 #footer {
-    height: 3em;
     background-color: hsla(38, 33%, 20%, 0.5);
 }
 
+#bottomBar,div.nav-item {
+    text-align: center;
+}
+
 ul#flashes {
 }
 

diff --git a/templates/base.html b/templates/base.html
@@ -34,12 +34,17 @@
 </head>
 <body class="text-light">
 
+<div class="container-fluid mx-0 px-0">
+
 <header class="d-print-none">
-    {% include 'navbar.html' %}
+    <div class="row">
+        {% include 'navbar.html' %}
+    </div>
 </header>
 
 <main>
-    <div class="container p-2" id="flashes-div">
+    <div class="container">
+    <div class="row p-2" id="flashes-div">
     {% if get_flashed_messages() %}
         <ul id="flashes">
         {% for category, msg in get_flashed_messages(with_categories=True) %}
@@ -49,7 +54,7 @@
     {% endif %}
     </div>
 
-    <div class="container w-print-100">
+    <div class="w-print-100">
         <div class="row justify-content-center">
             <div id="mainContentDiv" class="col-md-8">
                 {% block content %}
@@ -62,11 +67,15 @@
             </div>
         </div>
     </div>
+    </div>
 </main>
 
 <footer class="d-print-none">
-    {% include 'footer.html' %}
+    <div class="row align-items-end">
+        {% include 'footer.html' %}
+    </div>
 </footer>
+</div>
 
 <!-- Bootstrap JS with Popper -->
 <script src="{{ url_for('static', filename='bootstrap.bundle.min.js') }}"

diff --git a/templates/footer.html b/templates/footer.html
@@ -1,36 +1,34 @@
 <!-- https://getbootstrap.com/docs/4.0/components/navbar/ -->
 <nav id="footer"
-     class="navbar navbar-expand-sm fixed-bottom navbar-dark justify-content-between">
-    <div class="container">
-        <div class="collapse navbar-collapse" id="bottomBar">
-            <div class="collapse navbar-collapse"></div>
-{#            <span class="navbar-text font-weight-bolder">External links:</span>#}
-            <ul class="navbar-nav">
-                <li class="nav-item px-3">
-                    <a class="nav-link" href="https://stclementscambridge.co.uk/">
-                        St Clement's website
-                    </a>
-                </li>
-                <li class="nav-item px-3">
-                    <a class="nav-link" href="https://hymnary.org/hymnal/NEH1985">
-                        NEH
-                    </a>
-                </li>
-                <li class="nav-item px-3">
-                    <a class="nav-link" href="https://www.churchofengland.org/prayer-and-worship/worship-texts-and-resources/book-common-prayer">
-                        BCP
-                    </a>
-                </li>
-                <li class="nav-item px-3">
-                    <a class="nav-link" href="{{ url_for('acknowledgements_view') }}">Acknowledgements</a>
-                </li>
-                <li class="nav-item px-3">
-                    <a class="nav-link"
-                       href="https://github.com/jftsang/pypew">GitHub</a>
-                </li>
-            </ul>
-            <div class="collapse navbar-collapse"></div>
+     class="navbar fixed-bottom navbar-dark">
+    <div id="bottomBar" class="navbar-nav">
+        <div class="row justify-content-center">
+            <div class="col nav-item px-3">
+                <a class="nav-link text-nowrap"
+                   href="https://stclementscambridge.co.uk/">
+                    St Clement's website
+                </a>
+            </div>
+            <div class="col nav-item px-3">
+                <a class="nav-link text-nowrap"
+                   href="https://hymnary.org/hymnal/NEH1985">
+                    NEH
+                </a>
+            </div>
+            <div class="col nav-item px-3">
+                <a class="nav-link text-nowrap"
+                   href="https://www.churchofengland.org/prayer-and-worship/worship-texts-and-resources/book-common-prayer">
+                    BCP
+                </a>
+            </div>
+            <div class="col nav-item px-3">
+                <a class="nav-link text-nowrap"
+                   href="{{ url_for('acknowledgements_view') }}">Acknowledgements</a>
+            </div>
+            <div class="col nav-item px-3">
+                <a class="nav-link text-nowrap"
+                   href="https://github.com/jftsang/pypew">GitHub</a>
+            </div>
         </div>
-
     </div>
 </nav>