Jump to content

[Share] Change order of Element in Mobile Menu

Recommended Posts

Posted

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

image.png.1176f9474abebe9e8132b332eeea1535.png

Social Icons

div.header-menu-actions.social-accounts

image.png.5845d61f2a5cbeab19b54534050357c3.png

WeGlot Language

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

image.png.b8a73228e219dee651b4d59279de7c0a.png

Header Button

div.header-menu-cta

image.png.942745a7580a1af8393866e578adce7f.png

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;
}

image.thumb.png.6560e4cdd28f8d307851c9e4a2da43cc.png

Result

image.png.43a0bdab8aba5ad0fc48c957acbe8316.png

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;
}

image.png.e57a31b474fa1eea3a694953f9b66e17.png

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;
}

image.png.800ef38426702f65f713cc8ecb7f93b7.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • Replies 0
  • Views 188
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.