Merge pull request #179 from MarekPikula/navbar-separator

Add optional navbar separator

exampleSite/config.yaml

@@ -112,6 +112,7 @@ params:
     stickyNavBar:
       enable : true
       showOnScrollUp : true
+    enableSeparator: false
     menus:
       disableAbout: false
       disableExperience: false

layouts/partials/sections/header.html

@@ -139,6 +139,11 @@
                     </li>
                     {{ end }}
 
+                    {{ if and .Site.Menus.main (.Site.Params.navbar.enableSeparator | default false) }}
+                        <li class="nav-item navbar-text d-none d-lg-block d-xl-block"><div class="nav-link nav-link-sep"></div></li>
+                        <div class="dropdown-divider"></div>
+                    {{ end }}
+
                     <!-- custom menus from the user -->
                     {{ range .Site.Menus.main }}
                     {{ if .HasChildren }}

static/css/header.css

@@ -34,6 +34,7 @@ header .navbar .navbar-nav a {
 .navbar-text {
     font-size: 16px !important;
     opacity: 0.95;
+    white-space: nowrap;
 }
 header .nav-link{
     transition: none !important;
@@ -45,6 +46,10 @@ header .nav-link{
 .navbar .nav-link:hover {
     color: var(--primary-color) !important;
 }
+.nav-link.nav-link-sep:after {
+    content: "|";
+    color: var(--text-color) !important;
+}
 
 li > .dropdown-toggle:focus{
     color: var(--primary-color) !important;
@@ -65,6 +70,10 @@ li > .dropdown-toggle:focus{
     background-color: var(--secondary-color) !important;
 }
 
+.dropdown-divider {
+	border-top: 1px solid var(--lt-color-border-dark);
+}
+
 #search {
     border-radius: 1rem !important;
     background-color: var(--secondary-color);