Configure header footer

assets/js/script.js

@@ -66,22 +66,6 @@ $(document).ready(function () {
     }
   });
 
-  // Smooth scrolling
-  var scrollLink = $(".scroll");
-  scrollLink.click(function (e) {
-    e.preventDefault();
-    $("body,html").animate(
-      {
-        scrollTop: $(this.hash).offset().top,
-      },
-      1000
-    );
-  });
-
-  $(".navbar-nav>li>a").on("click", function () {
-    $(".navbar-collapse").collapse("hide");
-  });
-
   // service slider
   $(".service__slider").slick({
     infinite: false,

assets/scss/_common.scss

@@ -1,4 +1,4 @@
-.section{
+.section {
   padding: 100px 0;
 }
 
@@ -8,3 +8,15 @@
   margin-right: 0;
 }
 
+/**
+ * Enable smooth scrolling on all pages
+ */
+html {
+  scroll-behavior: smooth;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}

exampleSite/config.toml

@@ -10,56 +10,56 @@ url = "#home"
 weight = 1
 [[menu.main]]
 name = "About"
-url = "#about"
+url = "/#about"
 weight = 2
 [[menu.main]]
 name = "Service"
-url = "#service"
+url = "/#service"
 weight = 3
 [[menu.main]]
 name = "Work"
-url = "#portfolio"
+url = "/#portfolio"
 weight = 4
 [[menu.main]]
 name = "Resume"
-url = "#resume"
+url = "/#resume"
 weight = 5
 [[menu.main]]
 name = "Blog"
-url = "#blog"
+url = "/blog"
 weight = 6
 [[menu.main]]
 name = "Contact"
-url = "#contact"
+url = "/contact"
 weight = 7
 
 # Sitemap Menu
 [[menu.sitemap]]
 name = "About me"
-url = "about"
+url = "/#about"
 weight = 1
 [[menu.sitemap]]
-name = "Frequently Ask Question"
-url = "#"
-weight = 2
-[[menu.sitemap]]
-name = "Privacy & Policy"
-url = "#"
-weight = 3
-[[menu.sitemap]]
 name = "Latest Article"
-url = "#"
-weight = 4
+url = "/blog"
+weight = 2
 
 [params]
 blogPageURL = "blog"
 contactLink = "contact"
 copyright = "All right reserved copyright © Portio 2020"
-footerLogo = "images/contact/widget-logo.png"
 formspreeURL = "YOUR FORMSPREE URL"
 googleAnalytics = "YOUR GOOGLE ANALYTICS CODE"
 logo = "images/site-navigation/logo.png"
 
+footerButtonTarget = "/contact"
+footerButtonText = "Get in Touch"
+footerCallToAction = "Let's Start a Project"
+footerLogo = "images/contact/widget-logo.png"
+footerTopTitle = "Contact me"
+
+headerButtonTarget = "/contact"
+headerButtonText = "Hire Me Now"
+
 [params.address]
 address = "23 Khan Niketon, Grand Street, NYK."
 email = "hello@example.com"

layouts/partials/footer.html

@@ -23,12 +23,12 @@
 						</svg>
 					</div>
 					<div class="text-light footer__cta_content">
-						<span>Contact me</span>
-						<h2 class="mb-0">Let’s Start a Project</h2>
+						<span>{{ .Site.Params.FooterTopTitle }}</span>
+						<h2 class="mb-0">{{ .Site.Params.FooterCallToAction }}</h2>
 					</div>
 					<div class="footer__cta_action">
-						<a class="btn btn-light btn-zoom" href="{{ .Site.Params.contactLink | absURL }}">Get in
-							touch</a>
+						<a class="btn btn-light btn-zoom"
+							href="{{ .Site.Params.footerButtonTarget }}">{{ .Site.Params.FooterButtonText }}</a>
 					</div>
 				</div>
 			</div>
@@ -45,7 +45,9 @@ <h4 class="base-font">Sitemap</h4>
 					<ul class="unstyle-list small">
 						{{ $sitemap := .Site.Menus.sitemap }}
 						{{ range $sitemap }}
-						<li class="mb-2"><a class="text-light" href="{{ .URL | absURL }}">{{ .Name }}</a></li>
+						<li class="mb-2">
+							<a class="text-light scroll" href="{{ .URL }}">{{ .Name }}</a>
+						</li>
 						{{ end }}
 					</ul>
 				</div>

layouts/partials/navbar.html

@@ -14,13 +14,13 @@
         {{ $menu := .Site.Menus.main }}
         {{ range $index, $element := $menu }}
         <li class="nav-item">
-          <a href="{{ $.Site.BaseURL }}{{ .URL }}"
-            class="nav-link text-dark text-sm-center p-2 {{ if $.IsHome }}scroll{{ end }}">{{ .Name }}</a>
+          <a href="{{ .URL }}" class="nav-link text-dark text-sm-center p-2">{{ .Name }}</a>
         </li>
         {{ end }}
       </ul>
       <div class="navbar-nav">
-        <a href="{{ "contact" | absURL }}" class="btn btn-primary btn-zoom hire_button">Hire Me Now</a>
+        <a href="{{ .Site.Params.footerButtonTarget }}"
+          class="btn btn-primary btn-zoom hire_button">{{ .Site.Params.HeaderButtonText }}</a>
       </div>
     </div>
   </div>