restyling header nav menu & add some new classes

index.html

@@ -59,12 +59,12 @@
             <nav class="bottom-header-nav">
                 <div class="bottom-header-nav__el sale">
                     <span>
-                        <a href="">% sale</a>
+                        <a href="">% Sale</a>
                     </span>
                 </div>
                 <div class="bottom-header-nav__el furnitures-element">
                     <span>
-                        <a href="">meble</a>
+                        <a href="">Meble</a>
                     </span>
                     <div class="bottom-header-nav__wrapper">
                         <div class="menu-furnitures-swiper swiper">
@@ -191,7 +191,7 @@
                 </div>
                 <div class="bottom-header-nav__el rooms-element">
                     <span>
-                        <a href="">pomieszczenia</a>
+                        <a href="">Pomieszczenia</a>
                     </span>
                     <div class="bottom-header-nav__wrapper">
                         <div class="menu-rooms-swiper swiper">
@@ -318,7 +318,7 @@
                 </div>
                 <div class="bottom-header-nav__el">
                     <span>
-                        <a href="">dostępne od ręki</a>
+                        <a href="">Dostępne od ręki</a>
                     </span>
                     <div class="bottom-header-nav__wrapper">
                         <div class="menu-available-swiper swiper">
@@ -349,27 +349,27 @@
                 </div>
                 <div class="bottom-header-nav__el">
                     <span>
-                        <a href="">akcesoria i dekoracje</a>
+                        <a href="">Akcesoria i dekoracje</a>
                     </span>
                 </div>
                 <div class="bottom-header-nav__el">
                     <span>
-                        <a href="">nowości</a>
+                        <a href="">Nowości</a>
                     </span>
                 </div>
                 <div class="bottom-header-nav__el">
                     <span>
-                        <a href="">transport</a>
+                        <a href="">Transport</a>
                     </span>
                 </div>
                 <div class="bottom-header-nav__el">
                     <span>
-                        <a href="">kontakt</a>
+                        <a href="">Kontakt</a>
                     </span>
                 </div>
-                <div class="bottom-header-nav__el">
+                <div class="bottom-header-nav__el blog">
                     <span>
-                        <a href="">blog</a>
+                        <a href="">Blog</a>
                     </span>
                 </div>
             </nav>

sass/common/_header.scss

@@ -246,9 +246,17 @@
         box-sizing: border-box;
         cursor: pointer;
         border-right: 2px solid $white;
-        border-bottom: 4px solid $transparent;
+        border-bottom: 3px solid $transparent;
+        &.blog,
+        &.sale {
+          span {
+            a {
+              font-weight: 700;
+            }
+          }
+        }
         &:hover {
-          border-bottom: 4px solid $furnipol_orange;
+          border-bottom: 3px solid $furnipol_orange;
           > span + .bottom-header-nav__wrapper {
             display: flex;
           }
@@ -272,7 +280,6 @@
           font-size: 14px;
           font-weight: 700;
           line-height: 21px;
-          text-transform: uppercase;
           user-select: none;
           color: $furnipol_black;
           &.without-link {
@@ -283,10 +290,9 @@
             justify-content: center;
             align-items: center;
             font-size: 14px;
-            font-weight: 700;
+            font-weight: 500;
             line-height: 21px;
             padding: 14px 24px;
-            text-transform: uppercase;
             user-select: none;
             text-decoration: none;
             color: $furnipol_black;

sass/main.css

@@ -1965,10 +1965,13 @@ body {
   box-sizing: border-box;
   cursor: pointer;
   border-right: 2px solid #ffffff;
-  border-bottom: 4px solid rgba(255, 255, 255, 0);
+  border-bottom: 3px solid rgba(255, 255, 255, 0);
+}
+.header-2-0 .bottom-header-nav__el.blog span a, .header-2-0 .bottom-header-nav__el.sale span a {
+  font-weight: 700;
 }
 .header-2-0 .bottom-header-nav__el:hover {
-  border-bottom: 4px solid #eb7d3f;
+  border-bottom: 3px solid #eb7d3f;
 }
 .header-2-0 .bottom-header-nav__el:hover > span + .bottom-header-nav__wrapper {
   display: flex;
@@ -1990,7 +1993,6 @@ body {
   font-size: 14px;
   font-weight: 700;
   line-height: 21px;
-  text-transform: uppercase;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -2004,10 +2006,9 @@ body {
   justify-content: center;
   align-items: center;
   font-size: 14px;
-  font-weight: 700;
+  font-weight: 500;
   line-height: 21px;
   padding: 14px 24px;
-  text-transform: uppercase;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;