changed the menu icons on mobile view

unicef · Jun 27, 2022 · 1338a83 · 1338a83
1 parent 6f638db
commit 1338a83
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -518,6 +518,10 @@ nav #site-brand a:hover {
     background: transparent;
 }
 
+.breadcrumbBar{
+    position: relative;
+}
+
 .breadcrumbBar a{
     all:unset;
     cursor: pointer;
@@ -1285,7 +1289,17 @@ pre code::-webkit-scrollbar-thumb {
         all:unset;
     }
     .sidebarIcon{
-        display:block; !important
+        display:inline;
+        position:absolute;
+        right:22px;
+        top:7px; 
+        font-size: 20px; 
+    }
+    .navbarMenu{
+        right:10px !important;
+        color:var(--white-color);
+        top:10px !important;
+        font-size:16px !important;
     }
 }
 

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en-us{{ end }}">
   {{ partial "head.html" . }}
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
   <body>
     {{ if .IsHome }}

diff --git a/layouts/partials/navigation.html b/layouts/partials/navigation.html
@@ -26,10 +26,11 @@
         {{ end }}
       </a>
     </div>
-    <button class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#navigation"
+    <a class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#navigation"
       aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
+      <span class="sidebarIcon navbarMenu">Menu<i class="fa-solid fa-caret-down d-inline p-1"></i>
+      </span>
+  </a>
 
     <div class="collapse navbar-collapse text-center" id="navigation">
       <ul class="navbar-nav ml-auto">
@@ -83,7 +84,7 @@
   <div class="w-100 py-2 breadcrumbBar text-light" style=" {{ if .IsHome }}background-color: transparent{{ else }}background-color: {{ site.Params.text_color_dark }}{{ end }}">  
     <div class="container">
       {{ partial "breadcrumb.html" . }}
-      <a class="sidebarIcon float-right" data-toggle="collapse" data-target="#sidebarMobile"  aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation"> <i class="ti-menu text-light"></i></a>
+      <a data-toggle="collapse" data-target="#sidebarMobile"  aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation"> <i class="ti-menu text-light sidebarIcon"></i></a>
       <div class="text-light text-center sidebarMobile collapse justify-content-center" id="sidebarMobile">
         <div class="sidebarBox">
           <ul>