Merge pull request #76 from Tyrsson/toggler-fix

Fixes HTML and CSS for navbar and toggler
laminas · Dec 7, 2023 · 56bdfa4 · 56bdfa4
2 parents ddfb060 + da5512c
commit 56bdfa4
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 19 deletions.
diff --git a/module/Application/view/layout/layout.phtml b/module/Application/view/layout/layout.phtml
@@ -22,32 +22,30 @@
                             ])
             ->prependStylesheet($this->basePath('css/style.css'))
             ->prependStylesheet($this->basePath('css/bootstrap.min.css'))
-?>
-
+        ?>
         <!-- Scripts -->
         <?= $this->headScript() ?>
     </head>
     <body>
         <nav class="navbar navbar-expand-md navbar-dark mb-4" role="navigation">
             <div class="container">
-                <div class="navbar-header">
-                    <button
-                        class="navbar-toggler"
-                        type="button"
-                        data-bs-toggle="collapse"
-                        data-bs-target="#navbarSupportedContent"
-                        aria-controls="navbarSupportedContent"
-                        aria-expanded="false"
-                        aria-label="Toggle navigation"
-                    >
-                        <span class="navbar-toggler-icon"></span>
-                    </button>
-                    <a class="navbar-brand" href="<?= $this->url('home') ?>">
-                        <img src="<?= $this->basePath('img/laminas-logo.svg') ?>" alt="Laminas">MVC Skeleton
-                    </a>
-                </div>
+                <a class="navbar-brand" href="<?= $this->url('home') ?>">
+                    <img src="<?= $this->basePath('img/laminas-logo.svg') ?>" alt="Laminas">
+                    <span class="navbar-text text-light">MVC Skeleton</span>
+                </a>
+                <button
+                    class="navbar-toggler"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#navbarSupportedContent"
+                    aria-controls="navbarSupportedContent"
+                    aria-expanded="false"
+                    aria-label="Toggle navigation"
+                >
+                    <span class="navbar-toggler-icon"></span>
+                </button>
                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
-                    <ul class="navbar-nav">
+                    <ul class="navbar-nav ms-auto">
                         <li class="nav-item">
                             <a
                                 class="nav-link active"

diff --git a/public/css/style.css b/public/css/style.css
@@ -10,3 +10,8 @@
     background-color: var(--brand-color);
     border-color: var(--brand-color);
 }
+
+/* allows bootstrap to style Laminas Navigation generated menu items within the navbar */
+.navbar li.active a {
+    color: var(--bs-navbar-active-color);
+}