[Share] Change Order of Navigation on One Page

To change the order of navigation on One Page, you need to do these.

#1. First, find Page ID. 

In my example, we have: #collection-6673f2e18432c25013aee99f

#2. You need to know this

• First item (Book Now): nth-child(1)
• Second item (Home): nth-child(2)
• ...

#3. Suppose we need to change the order to this: Home, Projects, Canva, Pages, Sections, Blocks, Book Now, Search

We will use this code to Custom CSS box

#collection-6673f2e18432c25013aee99f {
  /* Home */
div.header-nav-item:nth-child(2) {
    order: 1;
}
/* Projects */
div.header-nav-item:nth-child(8) {
     order: 2;
}
/* Canva */
div.header-nav-item:nth-child(3) {
     order: 3;
}
/* Pages */
div.header-nav-item:nth-child(7) {
     order: 4;
}
/* Sections */
div.header-nav-item:nth-child(5) {
     order: 5;
}
/* Blocks */
div.header-nav-item:nth-child(6) {
     order: 6;
}
/* Book Now */
div.header-nav-item:nth-child(1) {
     order: 7;
    margin-left: 2.1vw;
}
/* Search */
div.header-nav-item:nth-child(4) {
    order: 8; 
}}

#4. Result

#5. To change order on Desktop + Mobile, use this code

#collection-6673f2e18432c25013aee99f {
/* general */
.header-menu-nav-wrapper {
    display: flex;
    flex-direction: column;
}
div.container.header-menu-nav-item {
     margin-left: 0px !important;
}
/* Home */
div.header-nav-item:nth-child(2), div.container.header-menu-nav-item:nth-child(2) {
    order: 1;
}
/* Projects */
div.header-nav-item:nth-child(8), div.container.header-menu-nav-item:nth-child(8) {
     order: 2;
}
/* Canva */
div.header-nav-item:nth-child(3), div.container.header-menu-nav-item:nth-child(3) {
     order: 3;
}
/* Pages */
div.header-nav-item:nth-child(7), div.container.header-menu-nav-item:nth-child(7) {
     order: 4;
}
/* Sections */
div.header-nav-item:nth-child(5), div.container.header-menu-nav-item:nth-child(5) {
     order: 5;
}
/* Blocks */
div.header-nav-item:nth-child(6), div.container.header-menu-nav-item:nth-child(6) {
     order: 6;
}
/* Book Now */
div.header-nav-item:nth-child(1), div.container.header-menu-nav-item:nth-child(1) {
     order: 7;
    margin-left: 2.1vw;
}
/* Search */
div.header-nav-item:nth-child(4), div.container.header-menu-nav-item:nth-child(4) {
    order: 8; 
}}

#6. To change order on Mobile only, use this code

#collection-6673f2e18432c25013aee99f {
/* general */
.header-menu-nav-wrapper {
    display: flex;
    flex-direction: column;
}
/* Home */
div.container.header-menu-nav-item:nth-child(2) {
    order: 1;
}
/* Projects */
div.container.header-menu-nav-item:nth-child(8) {
     order: 2;
}
/* Canva */
div.container.header-menu-nav-item:nth-child(3) {
     order: 3;
}
/* Pages */
div.container.header-menu-nav-item:nth-child(7) {
     order: 4;
}
/* Sections */
div.container.header-menu-nav-item:nth-child(5) {
     order: 5;
}
/* Blocks */
div.container.header-menu-nav-item:nth-child(6) {
     order: 6;
}
/* Book Now */
div.container.header-menu-nav-item:nth-child(1) {
     order: 7;
}
/* Search */
div.container.header-menu-nav-item:nth-child(4) {
    order: 8; 
}}

#7. In case you use Burger Menu on the Desktop, to change order on Mobile only, use this code

@media screen and (max-width:767px) {
#collection-6673f2e18432c25013aee99f {
/* general */
.header-menu-nav-wrapper {
    display: flex;
    flex-direction: column;
}
/* Home */
div.container.header-menu-nav-item:nth-child(2) {
    order: 1;
}
/* Projects */
div.container.header-menu-nav-item:nth-child(8) {
     order: 2;
}
/* Canva */
div.container.header-menu-nav-item:nth-child(3) {
     order: 3;
}
/* Pages */
div.container.header-menu-nav-item:nth-child(7) {
     order: 4;
}
/* Sections */
div.container.header-menu-nav-item:nth-child(5) {
     order: 5;
}
/* Blocks */
div.container.header-menu-nav-item:nth-child(6) {
     order: 6;
}
/* Book Now */
div.container.header-menu-nav-item:nth-child(1) {
     order: 7;
}
/* Search */
div.container.header-menu-nav-item:nth-child(4) {
    order: 8; 
}}}