Realign navigation elements for mobiles

doctrine · Nov 21, 2023 · 5a092f6 · 5a092f6
1 parent c016ac6
commit 5a092f6
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/source/styles/index.scss b/source/styles/index.scss
@@ -74,6 +74,7 @@ h6 {
   background: linear-gradient(-90deg, #2c374c, #1f2e4b);
   color: white;
   padding: 0 10px 0 10px;
+  align-items: normal;
 }
 
 .doctrine-navbar input {
@@ -91,6 +92,18 @@ h6 {
   width: 30px;
 }
 
+.doctrine-navbar .nav-outbound {
+  padding-top: 4px;
+}
+
+#search-box {
+  float: left;
+}
+
+.doctrine-navbar .navbar-collapse {
+  flex-basis: auto;
+}
+
 .dropdown:hover > .dropdown-menu {
   display: block;
 }

diff --git a/templates/layouts/layout.html.twig b/templates/layouts/layout.html.twig
@@ -125,9 +125,6 @@
 
             <nav class="doctrine-navbar navbar navbar-expand-lg navbar-dark sticky-top bg-dark flex-md-nowrap">
                 <a class="navbar-brand text-hide" href="{{ path('homepage') }}"><img src="{{ get_asset_url('/logos/doctrine-logo.svg', site.url) }}" />{{ site.title }}</a>
-                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
                 <div class="collapse navbar-collapse" id="navbarCollapse">
                     <ul class="navbar-nav mr-auto">
                         <li class="nav-item dropdown{% if menuSlug == 'projects' %} active{% endif %}">
@@ -172,10 +169,14 @@
                             <a href="https://github.com/doctrine/doctrine-website/edit/master/source{{ page.sourcePath }}" class="btn btn-light" target="_blank" rel="noopener noreferrer">Edit</a>
                         {% endif %}
                     </div>
-
+                </div>
+                <div class="nav-outbound">
                     <div id="search-box">
                         <!-- SearchBox widget will appear here -->
                     </div>
+                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+                        <span class="navbar-toggler-icon"></span>
+                    </button>
                 </div>
             </nav>