Header 1 Mobile - SCSS

// Mobile Header
.xd-mobile-header1 {
    /* ==== VARIABLES SECTION ==== */
    /*  The below code is all using the variables from _variables.scss
    Any changes to the site variables should be reflected automatically
    without requiring changing any custom code here */
    background: $header-bgcolor;
    .menu-bar {
        background: $primenav-bgcolor;
        border-top: $primenav-topborder;
        border-bottom: $primenav-btmborder;
        .fa {
            color: $primenav-mobile-iconcolor;
        }
        .icon-bar {
            background-color: $primenav-mobile-iconcolor;
        }
    }
    .PrimaryNavigation_1-0-0 {
        ul.nav {
            .root-link {
                color: $primenav-mobile-linkcolor !important;
                font-size: $primenav-mobile-fontsize !important;
            }
            .dropdown-menu {
                .dropdown {
                    .dropdown-link {
                        color: $primenav-mobile-linkcolor;
                        font-size: $primenav-mobile-dropdown-fontsize;
                        @if ($primenav-mobile-dropdownicon-display) {
                            &:before {
                                content: "#{$primenav-mobile-dropdownicon}";
                                font-family: "FontAwesome";
                            }
                        }
                        &:hover, &:focus{
                            background-color: transparent;
                        }
                    }
                }
            }
        }
    }
    /* ==== END VARIABLES SECTION ==== */
    /* ==== BASIC STYLES ==== */
    /*  This code is just some basic styling to format the header as shown in the XD UI kit.
        You shouldn't have to edit this code too much, but this code can be adjusted as needed.*/
    margin: 0;
    >.ari-column {
        padding: {
            left: 0;
            right: 0;
        };
    }
    .logo {
        margin: 20px 10px;
    }
    .xd1-mobile-search {
        padding: {
            left: 15px;
            right: 15px;
        };
        .SearchBar_1-0-0 {
            margin: 10px 0;
        }
    }
    .menu-bar {
        margin: 0;
        padding: 5px 0;
        .ari-col-xs-6 {
            display: flex;
            align-items: center;
            &.menu-bar-left {
                justify-content: flex-start;
            }
            &.menu-bar-right {
                justify-content: flex-end;
                .navbar-toggle {
                    margin: 0;
                    padding: 0;
                    overflow: visible;
                    &:not(.collapsed) {
                        .fa:before{ content: "\f00d"; }
                    }
                }
            }
        }
        .search-btn{
            a.collapsed{
                .fa-search:before{
                    content: "\f00d" !important;
                }
            }
        } 
    }
    .xd1-mobile-nav {
        padding: 0 15px;
        .navbar-header {
            display: none;
        }
        .navbar-collapse {
            display: block !important;
            .nav>li.dropdown .dropdown-menu .dropdown-link{
            	color: #fff;
            }
        }
    }
    /* ==== END BASIC STYLES ==== */
}