[Share] Change order of Element in Mobile Menu

To change order of elements in Mobile Menu, you need to know ID of these elements.

Menu Items

[data-folder="root"]>div.header-menu-nav-folder-content

Social Icons

div.header-menu-actions.social-accounts

WeGlot Language

div.header-menu-actions.language-picker.language-picker-mobile

Header Button

div.header-menu-cta

To set order of elements, we will use order code.

I will give some examples, and you can use that to change the order of elements.

Example 01

/* Menu Items */
[data-folder="root"]>div.header-menu-nav-folder-content {
    order: 2;
}
/* Socials */
div.header-menu-actions.social-accounts {
    order: 3;
}
/* Language */
div.header-menu-actions.language-picker.language-picker-mobile {
    order: 1;
}
/* Button */
.header-menu-cta {
    order: 4;
}

Result

Example 02

/* Menu Items */
[data-folder="root"]>div.header-menu-nav-folder-content {
    order: 4;
}
/* Socials */
div.header-menu-actions.social-accounts {
    order: 3;
}
/* Language */
div.header-menu-actions.language-picker.language-picker-mobile {
    order: 2;
}
/* Button */
.header-menu-cta {
    order: 1;
}

Example 03

/* Menu Items */
[data-folder="root"]>div.header-menu-nav-folder-content {
    order: 3;
}
/* Socials */
div.header-menu-actions.social-accounts {
    order: 2;
}
/* Language */
div.header-menu-actions.language-picker.language-picker-mobile {
    order: 4;
}
/* Button */
.header-menu-cta {
    order: 1;
}