fixed header responsive for 320px screen

gethugothemes · Feb 27, 2024 · ebb9d8a · ebb9d8a
1 parent 18a913f
commit ebb9d8a
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 32 deletions.
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -4,7 +4,7 @@ languageCode = "en-us"
 # site title 
 title = "Northendlab | Blog Template"
 # theme
-theme = "northendlab-light"
+theme = "northendlab-light-hugo"
 # post pagination
 paginate = "5"
 # post excerpt

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -1,52 +1,78 @@
-{{ "<!-- navigation -->" | safeHTML }}
 <header class="fixed-top navigation">
   <div class="container">
     <!-- navbar -->
-    <nav class="navbar navbar-expand-lg navbar-light bg-transparent">
-      <a class="navbar-brand"href="{{ .Site.BaseURL }}"><img class="img-fluid" src="{{ .Site.Params.logo | relURL }}" alt="{{ .Site.Title }}"></a>
-      <button class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#navigation">
-        <i class="ti-menu h3"></i>
+    <nav class="navbar px-0 navbar-expand-lg navbar-light bg-transparent">
+      <a class="navbar-brand" href="{{ .Site.BaseURL }}">
+        <img
+          class="img-fluid"
+          src="{{ .Site.Params.logo | relURL }}"
+          alt="{{ .Site.Title }}"
+        />
+      </a>
+      <button
+        class="navbar-toggler border-0 px-0"
+        type="button"
+        data-toggle="collapse"
+        data-target="#navigation"
+      >
+        <i class="ti-menu text-dark h3"></i>
       </button>
 
       <div class="collapse navbar-collapse text-center" id="navigation">
         <ul class="navbar-nav ml-auto">
           <li class="nav-item">
-            <a class="nav-link" href="{{ .Site.BaseURL }}">{{ with .Site.Params.Home }} {{ . }} {{ end }}</a>
+            <a class="nav-link" href="{{ .Site.BaseURL }}"
+              >{{ with .Site.Params.Home }} {{ . }} {{ end }}</a
+            >
           </li>
-          {{ range .Site.Menus.main }}
-            {{ if .HasChildren }}
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
-                aria-expanded="false">
-                {{ .Name }}
-              </a>
-              <div class="dropdown-menu">
-                {{ range .Children }}
-                <a class="dropdown-item" href="{{ .URL | absURL }}">{{ .Name }}</a>
-                {{ end }}
-              </div>
-            </li>
-            {{ else }}
-            <li class="nav-item">
-              <a class="nav-link" href="{{ .URL | absURL }}">{{ .Name }}</a>
-            </li>
-            {{ end }}
-          {{ end }}
+          {{ range .Site.Menus.main }} {{ if .HasChildren }}
+          <li class="nav-item dropdown">
+            <a
+              class="nav-link dropdown-toggle"
+              href="#"
+              role="button"
+              data-toggle="dropdown"
+              aria-haspopup="true"
+              aria-expanded="false"
+            >
+              {{ .Name }}
+            </a>
+            <div class="dropdown-menu">
+              {{ range .Children }}
+              <a class="dropdown-item" href="{{ .URL | absURL }}"
+                >{{ .Name }}</a
+              >
+              {{ end }}
+            </div>
+          </li>
+          {{ else }}
+          <li class="nav-item">
+            <a class="nav-link" href="{{ .URL | absURL }}">{{ .Name }}</a>
+          </li>
+          {{ end }} {{ end }}
         </ul>
-        {{ if .Site.Params.search.enable }}
-        {{ "<!-- search -->" | safeHTML }}
+        {{ if .Site.Params.search.enable }} {{ "<!-- search -->" | safeHTML }}
         <div class="search">
-          <button id="searchOpen" class="search-btn"><i class="ti-search"></i></button>
+          <button id="searchOpen" class="search-btn">
+            <i class="ti-search"></i>
+          </button>
           <div class="search-wrapper">
             <form action="{{ `search` | absURL }}" class="h-100">
-              <input class="search-box px-4" id="search-query" name="s" type="search" placeholder="Type & Hit Enter...">
+              <input
+                class="search-box px-4"
+                id="search-query"
+                name="s"
+                type="search"
+                placeholder="Type & Hit Enter..."
+              />
             </form>
-            <button id="searchClose" class="search-close"><i class="ti-close text-dark"></i></button>
+            <button id="searchClose" class="search-close">
+              <i class="ti-close text-dark"></i>
+            </button>
           </div>
         </div>
         {{ end }}
       </div>
     </nav>
   </div>
 </header>
-{{ "<!-- /navigation -->" | safeHTML }}