add breadcrumb

css/styles.css

@@ -14548,20 +14548,19 @@ header .hamburger {
 }
 /* line 22, header.scss */
 header .first {
-  /*         display: none; */
   position: relative;
-  top: 70px;
-  height: 90px;
+  top: 110px;
+  height: 70px;
 }
-/* line 30, header.scss */
+/* line 29, header.scss */
 header .hours {
   font-size: 0.75rem;
 }
-/* line 32, header.scss */
+/* line 31, header.scss */
 header .hours span {
   display: block;
 }
-/* line 37, header.scss */
+/* line 36, header.scss */
 header .topmenu {
   height: calc(100vh - 70px);
   position: fixed;
@@ -14572,7 +14571,7 @@ header .topmenu {
   display: none;
   overflow: auto;
 }
-/* line 47, header.scss */
+/* line 46, header.scss */
 header .topmenu ul {
   text-align: center;
   font-size: 1.125rem;
@@ -14582,23 +14581,56 @@ header .topmenu ul {
   padding: 0;
   line-height: 30px;
 }
-/* line 57, header.scss */
+/* line 56, header.scss */
 header .topmenu ul li {
   list-style: none;
   padding: 15px;
   display: block;
   border-top: 1px solid rgba(255, 255, 255, 0.6);
 }
-/* line 62, header.scss */
+/* line 61, header.scss */
 header .topmenu ul li a {
   color: white;
   text-decoration: none;
   transition: .4s;
 }
-/* line 66, header.scss */
+/* line 65, header.scss */
 header .topmenu ul li a:hover {
   color: rgba(255, 255, 255, 0.6);
 }
+/* line 73, header.scss */
+header .breadcrumb {
+  font-size: 0.75rem;
+  padding: 5px;
+  margin: 0;
+  background-color: #eceeef;
+  border-radius: 0;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  color: #aaa;
+  height: 30px;
+}
+/* line 85, header.scss */
+header .breadcrumb .container {
+  overflow: hidden;
+  overflow-x: auto;
+}
+/* line 88, header.scss */
+header .breadcrumb .container .crumbs {
+  height: 20px;
+  display: ruby;
+}
+/* line 91, header.scss */
+header .breadcrumb .container .crumbs a {
+  color: #aaa;
+  text-decoration: none;
+  transition: .4s;
+}
+/* line 95, header.scss */
+header .breadcrumb .container .crumbs a:hover {
+  color: #666;
+}
 
 @media only screen and (min-width: 768px) {
   /* line 5, mediaqueries/viewports/_768up.scss */

header.php

@@ -14,7 +14,7 @@
                         <span>Sab 9:00-13:00</span>
                     </div>
                 </div>
-
+            </div>
             <div class="hamburger hamburger--spin">
                 <div class="hamburger-box">
                     <div class="hamburger-inner"></div>
@@ -30,8 +30,15 @@
                     <li><a href="<?php echo $BASE_URLs;?>/contatti">Contatti</a></li>
                 </ul>
             </div>
+        </div>
         
+    </div>
 
+    <div class="breadcrumb">
+        <div class="container">
+            <div class="crumbs">
+                <span class="d-none d-sm-block">Ordine dei Farmacisti della Provincia di Salerno <i class="fa fa-angle-right"></i></span> <a href="">Home</a> 
+            </div>
         </div>
     </div>
     

scss/header.scss

@@ -20,10 +20,9 @@ header{
     
     
     .first{
-/*         display: none; */
         position: relative;
-        top: 70px;
-        height: 90px;
+        top: 110px;
+        height: 70px;
     }
         
 
@@ -70,4 +69,34 @@ header{
             }
         }
     }
+    
+    .breadcrumb {
+        font-size: $font-12;
+        padding: 5px;
+        margin: 0;
+        background-color: $light-grey;
+        border-radius: 0;
+        width: 100%;
+        position: absolute;
+        left: 0;
+        color: $grey;
+        height: 30px;
+        
+        .container{
+                overflow: hidden;
+                overflow-x: auto;
+            .crumbs{
+                height: 20px;
+                display: ruby;
+                a{
+                    color: $grey;
+                    text-decoration: none;
+                    transition: .4s;
+                    &:hover{
+                        color: $dark-grey;
+                    }
+                }
+            }
+        }
+    }
 } 

scss/variables.scss

@@ -66,6 +66,9 @@ $font-53: 3.312rem;     /* 53px */
 }
 
 
-$alpha:     rgba(255,255,255,0.6);
-$green:     #2e981e;//#67a562; 
-$red:       #aa0000;
+$alpha:         rgba(255,255,255,0.6);
+$green:         #2e981e;//#67a562; 
+$red:           #aa0000;
+$grey:          #aaa;
+$light-grey:    #eceeef;
+$dark-grey:     #666;