diff --git a/frontend/less/espo-vertical/custom.less b/frontend/less/espo-vertical/custom.less
index 41045395e8..ae02eded8a 100644
--- a/frontend/less/espo-vertical/custom.less
+++ b/frontend/less/espo-vertical/custom.less
@@ -1,3 +1,16 @@
+#navbar {
+    .navbar-header {
+        > a {
+            color: @navbar-inverse-link-color;
+
+            &:hover,
+            &:focus {
+                color: @navbar-inverse-link-hover-color;
+                background-color: @navbar-inverse-link-hover-bg;
+            }
+        }
+    }
+}
 
 .stick-sub {
     margin-top: @tob-bar-height;
@@ -13,30 +26,12 @@
     width: 200px;
 }
 
-#header .navbar-header {
-    > a {
-      color: @navbar-inverse-link-color;
-
-      &:hover,
-      &:focus {
-        color: @navbar-inverse-link-hover-color;
-        background-color: @navbar-inverse-link-hover-bg;
-      }
-    }
-}
-
-#header .navbar-header > a.minimizer span {
-  margin-top: 7px;
-  margin-left: 8px;
-}
-
 @media screen and (min-width: @screen-sm-min) {
     #global-search-panel {
         margin-top: -1px;
     }
     .notifications-badge-container > .notifications-button > .number-badge {
-      top: 3px;
-      left: 22px;
+        top: 3px;
+        left: 22px;
     }
 }
-
diff --git a/frontend/less/espo-vertical/layout.less b/frontend/less/espo-vertical/layout.less
index 8883b747a7..2cca2580b3 100644
--- a/frontend/less/espo-vertical/layout.less
+++ b/frontend/less/espo-vertical/layout.less
@@ -1,5 +1,5 @@
-#header .navbar-collapse {
-    @media (min-width: @grid-float-breakpoint) {
+@media (min-width: @grid-float-breakpoint) {
+    #header .navbar-collapse {
         .navbar & {
             padding-left: 0;
             padding-right: 0;
@@ -7,153 +7,321 @@
     }
 }
 
+@media screen and (min-width: @screen-sm-min) {
+
+    #header {
+        width: @navbar-width;
+    }
+
+    #navbar .navbar {
+        .nav > li.more > .dropdown-menu {
+            top: 0;
+            left: @navbar-width;
+            padding-top: 0;
+            padding-bottom: 0;
+            position: fixed;
+            border-left-width: 0;
+            border-top-width: 0;
+            overflow-y: hidden;
+        }
+
+        ul.tabs {
+            width: @navbar-width;
+            margin-left: -8px;
+            overflow-y: hidden;
+        }
+
+        a.minimizer {
+            color: @navbar-inverse-link-color;
+            text-decoration: none;
+            margin-top: 5px;
+            display: inline-block;
+            margin-left: 4px;
+        }
+
+        a.minimizer > span.left {
+            display: inline;
+        }
+
+        a.minimizer > span.right {
+            display: none;
+        }
+    }
+
+    #navbar {
+        .navbar {
+            top: 0;
+            border-width: 0 0 0 0;
+
+            position: fixed;
+            z-index: @zindex-navbar-fixed;
+            width: @navbar-width;
+            margin-bottom: 0px;
+            height: 100%;
+        }
+
+        .navbar-brand img {
+            max-width: @navbar-width - 12px;
+            height: 33px;
+        }
+
+        a.navbar-brand {
+            max-width: @navbar-width;
+            height: 35px;
+        }
+
+        .navbar-header {
+            width: @navbar-width;
+        }
+
+        .navbar-header > a.minimizer {
+            width: 30px;
+            height: 30px;
+            float: right;
+        }
+
+        .navbar-right {
+            position: fixed;
+            bottom: 20px;
+            position: fixed;
+            top: 0;
+            left: 0;
+            height: @tob-bar-height;
+            width: 100%;
+            background-color: @top-navbar-bg-color;
+            margin-left: @navbar-width;
+            padding-right: @navbar-width;
+
+            .global-search-container {
+                position: fixed;
+                top: 0;
+                right: 102px;
+            }
+
+            .global-search-container a.global-searcy-button {
+                padding: 5px 10px;
+                color: @gray-light;
+            }
+
+            .quick-create-container {
+                position: fixed;
+                top: 0;
+                right: 34px;
+                width: 34px;
+            }
+
+            .menu-container {
+                position: fixed;
+                top: 0;
+                right: 0;
+                width: 34px;
+            }
+
+            > li > a {
+                color: @gray-light;
+                padding: 5px 10px;
+            }
+
+            .notifications-badge-container {
+                position: fixed;
+                top: 0;
+                right: 68px;
+                width: 34px;
+            }
+        }
+
+        ul.tabs {
+            li {
+                float: none;
+            }
+
+            li > a {
+                padding-top: 8px;
+                padding-bottom: 8px;
+                padding-left: 10px;
+            }
+
+            li.tab > a {
+                padding-left: 10px - @navbar-color-border-width;
+            }
+        }
+
+        .navbar-form {
+            margin-top: 0px;
+            margin-bottom: 0px;
+        }
+    }
+}
 
 @media screen and (max-width: (@screen-sm-min - 1px)) {
-    #header a.minimizer {
-        display: none;
-    }
-    #header .navbar ul.nav > li.global-search-container {
-        display: block;
+    #navbar {
+        a.minimizer {
+            display: none;
+        }
+        .navbar ul.nav > li.global-search-container {
+            display: block;
+        }
     }
+
     #global-search-input {
         width: 100% !important;
     }
 }
 
-body > #header ul.tabs > li > a > span.full-label {
-    position: absolute;
-    margin-left: 28px;
-}
+body {
+    #navbar {
+        ul.tabs {
+            > li > a > span.full-label {
+                position: absolute;
+                margin-left: 28px;
+            }
 
-body > #header ul.tabs > li.more > ul > li > a > span.full-label {
-    padding-left: 28px;
-    position: static;
-}
+            > li.more > ul > li > a > span.full-label {
+                padding-left: 28px;
+                position: static;
+            }
 
-body > #header ul.tabs > li.more > ul > li > a > span.short-label, {
-    position: absolute;
-}
+            > li.more > ul > li > a > span.short-label, {
+                position: absolute;
+            }
 
-body > #header ul.tabs > li > a > span.short-label > .short-label-text {
-    font-weight: bold;
-    visibility: hidden;
-}
+            > li > a > span.short-label > .short-label-text {
+                font-weight: bold;
+                visibility: hidden;
+            }
 
-body > #header ul.tabs > li span.short-label > span {
-    display: inline-block;
-    width: 16px;
-    text-align: center;
-}
+            > li span.short-label > span {
+                display: inline-block;
+                width: 16px;
+                text-align: center;
+            }
 
-body > #header ul.tabs > li > a > span.full-label {
-    display: inline;
-    text-overflow: ellipsis;
-    max-width: ~"calc(100% - 50px)";
-    overflow: hidden;
-    white-space: nowrap;
-}
+            > li > a > span.full-label {
+                display: inline;
+                text-overflow: ellipsis;
+                max-width: ~"calc(100% - 50px)";
+                overflow: hidden;
+                white-space: nowrap;
+            }
+        }
 
-body > #header .navbar-brand span.home-icon {
-    display: none;
-}
+        .navbar-header {
+            > a.minimizer span {
+                margin-top: 7px;
+                margin-left: 8px;
+            }
+        }
 
-#header .more-icon {
-    display: inline;
-}
+        .navbar-brand span.home-icon {
+            display: none;
+        }
 
-#header .navbar > .navbar-header > a.navbar-brand {
-    &,
-    &:active {
-        color: @navbar-inverse-link-color;
-    }
-}
+        .navbar-header > a.navbar-brand {
+            &,
+            &:active {
+                color: @navbar-inverse-link-color;
+            }
+        }
 
-#header .navbar li.tab > a {
-    border-left-width: @navbar-color-border-width;
-    border-left-style: solid;
-    border-color: transparent;
+        .more-icon {
+            display: inline;
+        }
 
-    > span.full-label {
-        overflow-wrap: break-word;
-        word-wrap: break-word;
+        .navbar li.tab > a {
+            border-left-width: @navbar-color-border-width;
+            border-left-style: solid;
+            border-color: transparent;
+
+            > span.full-label {
+                overflow-wrap: break-word;
+                word-wrap: break-word;
+            }
+        }
     }
 }
 
 @media screen and (min-width: @screen-sm-min) {
 
-    #header .nav > li.more > .dropdown-menu {
-        top: 0;
-        left: @navbar-width;
-        padding-top: 0;
-        padding-bottom: 0;
-        position: fixed;
-        border-left-width: 0;
-        border-top-width: 0;
-        overflow-y: hidden;
-    }
-
-    #header ul.tabs {
-        width: @navbar-width;
-        margin-left: -8px;
-        overflow-y: hidden;
-    }
-
-    #header a.minimizer {
-        color: @navbar-inverse-link-color;
-        text-decoration: none;
-        margin-top: 5px;
-        display: inline-block;
-        margin-left: 4px;
-    }
-
-    #header a.minimizer > span.left {
-        display: inline;
-    }
-    #header a.minimizer > span.right {
-        display: none;
-    }
-
     body.minimized {
         #header {
             width: @navbar-minimized-width;
         }
 
-        #header .nav > li.more > ul.dropdown-menu {
-            left: @navbar-minimized-width;
-        }
+        #navbar {
+            .nav > li.more > ul.dropdown-menu {
+                left: @navbar-minimized-width;
+            }
 
-        #header .navbar-brand img {
-            display: none;
-        }
+            .navbar-brand {
+                position: fixed;
+                top: 0;
+                height: 35px;
+                width: @navbar-minimized-width;
+                padding-top: 8px;
 
-        #header a.navbar-brand {
-            position: fixed;
-            top: 0;
-            height: 35px;
-            width: @navbar-minimized-width;
-            padding-top: 8px;
-        }
+                span.home-icon {
+                    margin-left: 12px;
+                    display: inline;
+                    font-size: 14px;
+                }
 
-        #header a.navbar-brand span.home-icon {
-            margin-left: 12px;
-            display: inline;
-            font-size: 14px;
-        }
+                img {
+                    display: none;
+                }
+            }
 
-        #header .navbar-brand img {
-            display: none;
-        }
+            .navbar-header {
+                width: @navbar-minimized-width;
+                height: 30px;
+            }
 
-        #header .navbar-header {
-            width: @navbar-minimized-width;
-            height: 30px;
-        }
+            a.minimizer > span.left {
+                display: none;
+            }
 
-        #header a.minimizer > span.left {
-            display: none;
-        }
-        #header a.minimizer > span.right {
-            display: inline;
+            a.minimizer > span.right {
+                display: inline;
+            }
+
+            .navbar {
+                width: @navbar-minimized-width;
+            }
+
+            ul.tabs {
+                width: @navbar-minimized-width;
+                margin-top: 5px;
+
+                > li > a {
+                    padding-left: 10px;
+                }
+
+                > li.tab > a {
+                    padding-left: 10px - @navbar-color-border-width;
+                }
+
+                > li > a > span.short-label {
+                    display: inline;
+                }
+
+                > li > a > span.short-label > .color-icon {
+                    display: none;
+                }
+
+                > li > a > span.full-label {
+                    display: none;
+                }
+
+                > li > a > span.short-label > .short-label-text {
+                    position: relative;
+                    left: -1px;
+                    visibility: visible;
+                }
+            }
+
+            .navbar-right {
+                margin-left: @navbar-minimized-width;
+                padding-right: @navbar-minimized-width;
+            }
         }
 
         #content {
@@ -163,75 +331,6 @@ body > #header .navbar-brand span.home-icon {
         #footer {
             margin-left: @navbar-minimized-width;
         }
-
-        #header .navbar {
-            width: @navbar-minimized-width;
-        }
-
-        #header ul.tabs {
-            width: @navbar-minimized-width;
-            margin-top: 5px;
-        }
-
-        #header .navbar-right {
-            margin-left: @navbar-minimized-width;
-            padding-right: @navbar-minimized-width;
-        }
-
-        #header ul.tabs > li > a {
-            padding-left: 10px;
-        }
-
-        #header ul.tabs > li.tab > a {
-            padding-left: 10px - @navbar-color-border-width;
-        }
-
-        #header ul.tabs > li > a > span.short-label {
-            display: inline;
-        }
-
-        #header ul.tabs > li > a > span.short-label > .color-icon {
-            display: none;
-        }
-
-        #header ul.tabs > li > a > span.full-label {
-            display: none;
-        }
-
-        > #header ul.tabs > li > a > span.short-label > .short-label-text {
-            position: relative;
-            left: -1px;
-            visibility: visible;
-        }
-    }
-
-    #header .navbar {
-        top: 0;
-        border-width: 0 0 0 0;
-    }
-
-    #header {
-        width: @navbar-width;
-    }
-
-    #header .navbar-brand img {
-        max-width: @navbar-width - 12px;
-        height: 33px;
-    }
-
-    #header a.navbar-brand {
-        max-width: @navbar-width;
-        height: 35px;
-    }
-
-    #header .navbar-header {
-        width: @navbar-width;
-    }
-
-    #header .navbar-header > a.minimizer {
-        width: 30px;
-        height: 30px;
-        float: right;
     }
 
     body > .content {
@@ -267,83 +366,6 @@ body > #header .navbar-brand span.home-icon {
         margin-left: @navbar-width;
     }
 
-    #header .navbar {
-        position: fixed;
-        z-index: @zindex-navbar-fixed;
-        width: @navbar-width;
-        margin-bottom: 0px;
-        height: 100%;
-    }
-
-    #header ul.tabs li {
-        float: none;
-    }
-
-    #header .navbar-right {
-        position: fixed;
-        bottom: 20px;
-        position: fixed;
-        top: 0;
-        left: 0;
-        height: @tob-bar-height;
-        width: 100%;
-        background-color: @top-navbar-bg-color;
-        margin-left: @navbar-width;
-        padding-right: @navbar-width;
-    }
-
-    #header .navbar-right .global-search-container {
-        position: fixed;
-        top: 0;
-        right: 102px;
-    }
-
-    #header .navbar-right .global-search-container a.global-searcy-button {
-        padding: 5px 10px;
-        color: @gray-light;
-    }
-
-    #header .navbar-right .quick-create-container {
-        position: fixed;
-        top: 0;
-        right: 34px;
-        width: 34px;
-    }
-
-    #header .navbar-right .menu-container {
-        position: fixed;
-        top: 0;
-        right: 0;
-        width: 34px;
-    }
-
-    #header .navbar-right > li > a {
-        color: @gray-light;
-        padding: 5px 10px;
-    }
-
-    #header .navbar-right .notifications-badge-container {
-        position: fixed;
-        top: 0;
-        right: 68px;
-        width: 34px;
-    }
-
-    #header ul.tabs li > a {
-        padding-top: 8px;
-        padding-bottom: 8px;
-        padding-left: 10px;
-    }
-
-    #header ul.tabs li.tab > a {
-        padding-left: 10px - @navbar-color-border-width;
-    }
-
-    #header .navbar-form {
-        margin-top: 0px;
-        margin-bottom: 0px;
-    }
-
     #global-search-input {
         height: @tob-bar-height !important;
         margin-top: 0 !important;
@@ -360,7 +382,6 @@ body > #header .navbar-brand span.home-icon {
     }
 }
 
-
 body .stick-sub.button-container {
     width: calc(~"100% - "@navbar-width);
 }
diff --git a/frontend/less/espo/custom.less b/frontend/less/espo/custom.less
index e3c599cd7f..b9d002aa45 100644
--- a/frontend/less/espo/custom.less
+++ b/frontend/less/espo/custom.less
@@ -1,3 +1,57 @@
+#navbar .navbar {
+    border-bottom-width: 0 !important;
+
+    img.logo {
+        max-height: 100%;
+    }
+
+    .navbar-header a.navbar-brand {
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .navbar-brand {
+        padding: 0;
+    }
+
+    .navbar-right {
+        margin-right: -2px !important;
+    }
+
+    .navbar-form.global-search-container {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
+
+@media screen and (max-width: (@screen-sm-min - 1px)) {
+    #navbar .navbar {
+        .navbar-form.global-search-container {
+            padding-left: 8px;
+            padding-right: 8px;
+        }
+
+        .navbar-form.global-search-container > .input-group {
+            margin-left: 14px;
+        }
+
+        .navbar-right {
+            > li {
+                display: inline-block;
+            }
+
+            > li.notifications-badge-container {
+                display: inline-block;
+                float: right;
+            }
+        }
+
+        .navbar-collapse {
+            overflow-x: hidden !important;
+        }
+    }
+}
+
 .btn {
     border-radius: @button-radius;
 }
@@ -352,31 +406,8 @@ table.table > thead th {
     .box-shadow(none);
 }
 
-.navbar-inverse {
-    border-bottom-width: 0 !important;
-}
 
-@media screen and (min-width: @screen-sm-min) {
-    .navbar .navbar-header {
-        width: 181px;
-    }
-}
 
-.navbar .navbar-header a.navbar-brand {
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.navbar-brand {
-    padding: 0;
-    width: @logo-width;
-    height: @logo-height;
-}
-
-.navbar img.logo {
-    max-height: 100%;
-    max-width: 100%;
-}
 
 #login.panel .panel-heading {
     border-bottom-width: 0;
@@ -1401,19 +1432,6 @@ body > footer > p a:visited {
     color: @gray;
 }
 
-.navbar-right {
-    margin-right: -2px !important;
-}
-
-.navbar-collapse {
-    overflow-x: hidden !important;
-}
-
-.navbar-form.global-search-container {
-    padding-left: 0;
-    padding-right: 0;
-}
-
 #global-search-panel > .panel > .panel-body {
     max-height: @navbar-panel-body-max-height;
     overflow-y: auto;
@@ -2179,28 +2197,10 @@ pre > code {
         margin-right: 10px;
     }
 
-    .navbar-form.global-search-container {
-        padding-left: 8px;
-        padding-right: 8px;
-    }
-
-    .navbar-form.global-search-container > .input-group {
-        margin-left: 14px;
-    }
-
     #global-search-input {
         width: 100%;
     }
 
-    #header .navbar-right > li {
-        display: inline-block;
-    }
-
-    #header .navbar-right > li.notifications-badge-container {
-        display: inline-block;
-        float: right;
-    }
-
     .search-row .search-right-buttons-group {
         float: right;
     }
diff --git a/frontend/less/espo/layout.less b/frontend/less/espo/layout.less
index 5e27452e76..aea771739b 100644
--- a/frontend/less/espo/layout.less
+++ b/frontend/less/espo/layout.less
@@ -1,32 +1,93 @@
-#header .navbar {
+#navbar .navbar {
     .navbar-collapse {
         max-height: @navbar-collapse-max-height;
 
         @media (max-device-width: @screen-xs-min) and (orientation: landscape) {
             max-height: 200px;
         }
-    }
-}
 
-#header .navbar-collapse {
-    @media (min-width: @grid-float-breakpoint) {
-        .navbar & {
-            padding-left: 0;
-            padding-right: 0;
+        @media (min-width: @grid-float-breakpoint) {
+            .navbar & {
+                padding-left: 0;
+                padding-right: 0;
+            }
+        }
+    }
+
+    .navbar-brand {
+        padding: 0;
+        width: @logo-width;
+        height: @logo-height;
+
+        span.home-icon {
+            display: none;
         }
     }
-}
 
-#header .navbar {
     position: fixed;
     right: 0;
     left: 0;
     z-index: @zindex-navbar-fixed;
-}
-
-#header .navbar {
     top: 0;
     border-width: 0 0 1px;
+
+    a.minimizer {
+        display: none;
+    }
+
+    .more-icon {
+        display: inline;
+    }
+
+    ul.tabs span.short-label {
+        display: none;
+    }
+    ul.tabs span.full-label {
+        display: inline;
+    }
+}
+
+@media screen and (max-width: (@screen-sm-min - 1px)) {
+    #navbar .navbar {
+        position: static;
+
+        ul.nav > li.global-search-container {
+            display: block;
+        }
+
+        li.tab > a {
+            border-right-width: @navbar-color-border-width;
+            border-right-style: solid;
+            border-color: transparent;
+        }
+    }
+}
+
+@media screen and (min-width: @screen-sm-min) {
+    #navbar .navbar {
+        .more-icon {
+            top: 1px;
+            position: relative;
+        }
+
+        .navbar-header {
+            width: 181px;
+        }
+
+        ul.nav > li.tab > a {
+            border-bottom-width: @navbar-color-border-width;
+            border-bottom-style: solid;
+            border-color: transparent;
+            padding-bottom: floor(@navbar-padding-vertical - @navbar-color-border-width);
+        }
+
+        ul.dropdown-menu > li.tab > a {
+            border-left-width: @navbar-color-border-width;
+            border-left-style: solid;
+            border-color: transparent;
+            padding-left: 20px - @navbar-color-border-width;
+        }
+    }
 }
 
 body {
@@ -54,18 +115,9 @@ body > footer {
 }
 
 @media screen and (max-width: (@screen-sm-min - 1px)) {
-    #header .navbar {
-        position: static;
-    }
     body {
         padding-top: 0;
     }
-    #header .navbar ul.nav > li.global-search-container {
-        display: block;
-    }
-}
-
-@media screen and (max-width: (@screen-sm-min - 1px)) {
     body > .content {
         margin-top: -95px;
         padding-top: 95px;
@@ -76,51 +128,6 @@ body > footer {
     body > footer {
         margin-top: 23px;
     }
-
-    #header .navbar li.tab > a {
-        border-right-width: @navbar-color-border-width;
-        border-right-style: solid;
-        border-color: transparent;
-    }
-}
-
-#header a.minimizer {
-    display: none;
-}
-
-#header .more-icon {
-    display: inline;
-}
-
-@media screen and (min-width: @screen-sm-min) {
-    .more-icon {
-        top: 1px;
-        position: relative;
-    }
-
-    #header .navbar ul.nav > li.tab > a {
-        border-bottom-width: @navbar-color-border-width;
-        border-bottom-style: solid;
-        border-color: transparent;
-        padding-bottom: floor(@navbar-padding-vertical - @navbar-color-border-width);
-    }
-
-    #header .navbar ul.dropdown-menu > li.tab > a {
-        border-left-width: @navbar-color-border-width;
-        border-left-style: solid;
-        border-color: transparent;
-        padding-left: 20px - @navbar-color-border-width;
-    }
-}
-
-body > #header ul.tabs span.short-label {
-    display: none;
-}
-body > #header ul.tabs span.full-label {
-    display: inline;
-}
-body > #header .navbar-brand span.home-icon {
-    display: none;
 }
 
 @media (min-width: @screen-lg-min) {
diff --git a/frontend/less/espo/variables.less b/frontend/less/espo/variables.less
index 957c5678a4..ada10a50ef 100644
--- a/frontend/less/espo/variables.less
+++ b/frontend/less/espo/variables.less
@@ -26,11 +26,11 @@
 @modal-inner-padding: @panel-padding;
 
 .container-fixed() {
-  margin-right: auto;
-  margin-left: auto;
-  padding-left: @container-padding;
-  padding-right: @container-padding;
-  .clearfix();
+    margin-right: auto;
+    margin-left: auto;
+    padding-left: @container-padding;
+    padding-right: @container-padding;
+    .clearfix();
 }
 
 @line-height-small-computed: floor((@font-size-base * @line-height-small));
@@ -78,16 +78,16 @@
 @state-info-bg: @brand-info;
 @state-warning-text: #9E7328;
 
-@navbar-inverse-color:                      @gray-light;
-@navbar-inverse-bg:                         #4A6492;
-@navbar-inverse-border:                     transparent;
-@navbar-inverse-link-color:                 #DFDFDF;
-@navbar-inverse-link-hover-color:           #fff;
-@navbar-inverse-link-hover-bg:              transparent;
-@navbar-inverse-link-active-color:          @navbar-inverse-link-hover-color;
-@navbar-inverse-link-active-bg:             darken(@navbar-inverse-bg, 10%);
-@navbar-inverse-link-disabled-color:        #444;
-@navbar-inverse-link-disabled-bg:           transparent;
+@navbar-inverse-color: @gray-light;
+@navbar-inverse-bg: #4A6492;
+@navbar-inverse-border: transparent;
+@navbar-inverse-link-color: #DFDFDF;
+@navbar-inverse-link-hover-color: #fff;
+@navbar-inverse-link-hover-bg: transparent;
+@navbar-inverse-link-active-color:  @navbar-inverse-link-hover-color;
+@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%);
+@navbar-inverse-link-disabled-color:  #444;
+@navbar-inverse-link-disabled-bg: transparent;
 @navbar-inverse-toggle-hover-bg: darken(@navbar-inverse-bg, 10%);
 
 @white-color: #fafbfc;
diff --git a/frontend/less/hazyblue-vertical/custom.less b/frontend/less/hazyblue-vertical/custom.less
index 50aae98563..a4bbd7e7f6 100644
--- a/frontend/less/hazyblue-vertical/custom.less
+++ b/frontend/less/hazyblue-vertical/custom.less
@@ -1,3 +1,28 @@
+#navbar .navbar {
+    .navbar-nav.navbar-right > .open {
+        > a,
+        > a:hover,
+        > a:active,
+        > a:focus {
+            background-color: transparent;
+            .box-shadow(inset 0 1px 5px rgba(0,0,0,.125));
+        }
+    }
+    .box-shadow(none);
+
+    .navbar-right {
+        .box-shadow(none);
+    }
+}
+
+@media screen and (min-width: @screen-sm-min) {
+    #navbar .navbar {
+        .navbar-right {
+            background-color: @navbar-bg;
+        }
+    }
+}
+
 .panel-heading {
     border-bottom-width: 0;
 }
@@ -23,14 +48,6 @@
     }
 }
 
-.navbar-inverse .navbar-nav.navbar-right > .open > a,
-.navbar-inverse .navbar-nav.navbar-right > .open > a:hover,
-.navbar-inverse .navbar-nav.navbar-right > .open > a:active,
-.navbar-inverse .navbar-nav.navbar-right > .open > a:focus {
-    background-color: transparent;
-    .box-shadow(inset 0 1px 5px rgba(0,0,0,.125));
-}
-
 .panel-title {
     font-size: 15px;
     line-height: 17px;
@@ -90,11 +107,6 @@ table.table {
     .box-shadow(none);
 }
 
-@media screen and (min-width: @screen-sm-min) {
-    #navbar .nav.navbar-nav.navbar-right {
-        background-color: @navbar-bg;
-    }
-}
 
 .list-container > .list,
 .panel,
@@ -110,9 +122,7 @@ table.table {
     .box-shadow(3px 3px 4px rgba(0,0,0,0.13));
 }
 
-#navbar .nav.navbar-nav.navbar-right,
-.stick-sub.button-container,
-#navbar .navbar.navbar-inverse {
+.stick-sub.button-container {
     .box-shadow(none);
 }