MAGETWO-47593: Toggle buttons are displayed not aligned in responsive menu on Storefront

Author: zanilee

app/design/frontend/Magento/blank/web/css/source/_navigation.less

@@ -97,40 +97,40 @@
             }
 
             &:last-child {
-                    border-bottom: 1px solid @color-gray82;
+                border-bottom: 1px solid @color-gray82;
             }
+        }
 
-            &-trigger {
-                strong {
-                    position: relative;
-                    .lib-icon-font(
-                    @_icon-font-content: @icon-down,
-                    @_icon-font-size: 42px,
-                    @_icon-font-position: after,
-                    @_icon-font-display: block
-                    );
-
-                    &:after {
-                        position: absolute;
-                        right: -40px;
-                        top: -16px;
-                    }
-                }
+        .switcher-trigger {
+            strong {
+                position: relative;
+                .lib-icon-font(
+                @_icon-font-content: @icon-down,
+                @_icon-font-size: 42px,
+                @_icon-font-position: after,
+                @_icon-font-display: block
+                );
 
-                &.active strong {
-                    .lib-icon-font-symbol(
-                    @_icon-font-content: @icon-up,
-                    @_icon-font-position: after
-                    );
+                &:after {
+                    position: absolute;
+                    right: -40px;
+                    top: -16px;
                 }
             }
 
-            &-dropdown {
-                .lib-list-reset-styles();
-                padding: @indent__s 0;
+            &.active strong {
+                .lib-icon-font-symbol(
+                @_icon-font-content: @icon-up,
+                @_icon-font-position: after
+                );
             }
         }
 
+        .switcher-dropdown {
+            .lib-list-reset-styles();
+            padding: @indent__s 0;
+        }
+
         .header.links {
             .lib-list-reset-styles();
             border-bottom: 1px solid @color-gray82;
@@ -215,50 +215,48 @@
         }
     }
 
-    .nav-sections {
-        &-items {
-            .lib-clearfix();
-            position: relative;
-            z-index: 1;
-        }
+    .nav-sections-items {
+        .lib-clearfix();
+        position: relative;
+        z-index: 1;
+    }
 
-        &-item-title {
-            background: darken(@navigation__background,5%);
-            border: solid darken(@navigation__background,10%);
-            border-width: 0 0 1px 1px;
-            box-sizing: border-box;
-            float: left;
-            height: 71px;
-            padding-top: 24px;
-            text-align: center;
-            width: 33.33%;
-
-            &.active {
-                background: transparent;
-                border-bottom: 0;
-            }
+    .nav-sections-item-title {
+        background: darken(@navigation__background, 5%);
+        border: solid darken(@navigation__background, 10%);
+        border-width: 0 0 1px 1px;
+        box-sizing: border-box;
+        float: left;
+        height: 71px;
+        padding-top: 24px;
+        text-align: center;
+        width: 33.33%;
+
+        &.active {
+            background: transparent;
+            border-bottom: 0;
+        }
 
-            .nav-sections-item-switch {
-                &:hover {
-                    text-decoration: none;
-                }
+        .nav-sections-item-switch {
+            &:hover {
+                text-decoration: none;
             }
         }
+    }
 
-        &-item-content {
-            .lib-clearfix();
-            box-sizing: border-box;
-            float: right;
-            margin-left: -100%;
-            margin-top: 71px;
-            width: 100%;
-
-            &.active {
-                display: block;
-            }
+    .nav-sections-item-content {
+        .lib-clearfix();
+        box-sizing: border-box;
+        float: right;
+        margin-left: -100%;
+        margin-top: 71px;
+        width: 100%;
 
-            padding: @indent__m 0;
+        &.active {
+            display: block;
         }
+
+        padding: @indent__m 0;
     }
 
     .lib-main-navigation();
@@ -277,20 +275,22 @@
         .lib-vendor-prefix-flex-shrink(0);
         .lib-vendor-prefix-flex-basis(auto);
         margin-bottom: @indent__m;
+    }
 
-        &-item-title {
-            display: none;
-        }
+    .nav-sections-item-title {
+        display: none;
+    }
 
-        &-item-content {
-            display: block !important;
-        }
+    .nav-sections-item-content {
+        display: block !important;
+    }
 
-        &-item-content > * {
-            display: none;
-        }
+    .nav-sections-item-content > * {
+        display: none;
+    }
 
-        &-item-content > .navigation {
+    .nav-sections-item-content {
+        > .navigation {
             display: block;
         }
     }