Place Facebook social icon first, beside Tiktok, instagram, twitter and contact

Site URL: https://www.queenofsol.com/pictures-videos

Hi!

I have a facebook social icon that has placed itself differently from the other icons. Can someone help me align the facebook icon with the other icons? I don't quite know what's happened. Thank you for your time 😃

Below is my current css coding:

//social icons in menu//
.header-nav-folder-item.header-nav-folder-item--external
[href="https://www.facebook.com/queenofsolmusic"] {
    background-image: url(https://static1.squarespace.com/static/5feeff4078965c3d27c09d49/t/60265cb380f5db784fb09d4f/1613126835700/Asset+311.png) !important;
    background-size: contain !important;
  background-position:center!important;
    background-repeat: no-repeat !important;
    color: transparent !important;
    margin-bottom: 5px;
}
.header-nav-folder-item.header-nav-folder-item--external
[href="https://www.tiktok.com/@queenofsol"] {
    background-image: url(https://static1.squarespace.com/static/5feeff4078965c3d27c09d49/t/6026fa9218f6a5109abbd4db/1613167250612/Asset+312.png) !important;
   background-position:center!important;
    background-size: contain!important;
    background-repeat: no-repeat !important;
    color: transparent !important;
    margin-bottom: 5px;
}
.header-nav-folder-item.header-nav-folder-item--external
[href="https://www.instagram.com/queenofsol"] {
    background-image: url(https://static1.squarespace.com/static/5feeff4078965c3d27c09d49/t/6026fc1c12bd686fe95c8a74/1613167644662/Asset+313.png) !important;
   background-position:center!important;
   background-size: contain!important;
    background-repeat: no-repeat !important;
    color: transparent !important;
    margin-bottom: 5px;
}
.header-nav-folder-item.header-nav-folder-item--external
[href="https://twitter.com/_QueenofSol"] {
    background-image: url(https://static1.squarespace.com/static/5feeff4078965c3d27c09d49/t/6026fc59e8b20275c6da5ce0/1613167705184/Asset+314.png) !important;
   background-position:center!important;
    background-size: contain!important;
    background-repeat: no-repeat !important;
    color: transparent !important;
    margin-bottom: 5px;
}
.header-nav-folder-item.header-nav-folder-item--external
[href="https://www.queenofsol.com/contact"] {
    background-image: url(https://static1.squarespace.com/static/5feeff4078965c3d27c09d49/t/6026fbd2cf13eb2323dffdb2/1613167570311/Asset+315.png) !important;
   background-position:center !important;
    background-size:contain!important;
    background-repeat: no-repeat !important;
    color: transparent !important;
    margin-bottom: 5px;
}

.header-nav-folder-item.header-nav-folder-item--external:last-child
 {   margin-top:3px;
   width: 100% !important;
   text-align:center;
background-image: url() !important;
   background-position:center !important;
    background-size:contain!important;
    background-repeat: no-repeat !important;
    color: transparent !important;
    margin-bottom: 5px;}

/* Socials icons in folder */
.header-nav-folder-content>div:nth-child(n+6) {
    width: 20% !important;
    float: left !important;
}
/* Center menu social */
.header-nav-folder-item.header-nav-folder-item--external:nth-child(6) {
    margin-left: 0% !important;
}
 

Looks like this section (/* Socials icons in folder */) should be nth-child(n+5) not (n+6) so that you target all of the social icons.

Here's you corrected CSS:

//social icons in menu//
.header-nav-folder-item.header-nav-folder-item--external
[href="https://www.facebook.com/queenofsolmusic"] {
    background-image: url(https://static1.squarespace.com/static/5feeff4078965c3d27c09d49/t/60265cb380f5db784fb09d4f/1613126835700/Asset+311.png) !important;
    background-size: contain !important;
  background-position:center!important;
    background-repeat: no-repeat !important;
    color: transparent !important;
    margin-bottom: 5px;
}
.header-nav-folder-item.header-nav-folder-item--external
[href="https://www.tiktok.com/@queenofsol"] {
    background-image: url(https://static1.squarespace.com/static/5feeff4078965c3d27c09d49/t/6026fa9218f6a5109abbd4db/1613167250612/Asset+312.png) !important;
   background-position:center!important;
    background-size: contain!important;
    background-repeat: no-repeat !important;
    color: transparent !important;
    margin-bottom: 5px;
}
.header-nav-folder-item.header-nav-folder-item--external
[href="https://www.instagram.com/queenofsol"] {
    background-image: url(https://static1.squarespace.com/static/5feeff4078965c3d27c09d49/t/6026fc1c12bd686fe95c8a74/1613167644662/Asset+313.png) !important;
   background-position:center!important;
   background-size: contain!important;
    background-repeat: no-repeat !important;
    color: transparent !important;
    margin-bottom: 5px;
}
.header-nav-folder-item.header-nav-folder-item--external
[href="https://twitter.com/_QueenofSol"] {
    background-image: url(https://static1.squarespace.com/static/5feeff4078965c3d27c09d49/t/6026fc59e8b20275c6da5ce0/1613167705184/Asset+314.png) !important;
   background-position:center!important;
    background-size: contain!important;
    background-repeat: no-repeat !important;
    color: transparent !important;
    margin-bottom: 5px;
}
.header-nav-folder-item.header-nav-folder-item--external
[href="https://www.queenofsol.com/contact"] {
    background-image: url(https://static1.squarespace.com/static/5feeff4078965c3d27c09d49/t/6026fbd2cf13eb2323dffdb2/1613167570311/Asset+315.png) !important;
   background-position:center !important;
    background-size:contain!important;
    background-repeat: no-repeat !important;
    color: transparent !important;
    margin-bottom: 5px;
}

.header-nav-folder-item.header-nav-folder-item--external:last-child
 {   margin-top:3px;
   width: 100% !important;
   text-align:center;
background-image: url() !important;
   background-position:center !important;
    background-size:contain!important;
    background-repeat: no-repeat !important;
    color: transparent !important;
    margin-bottom: 5px;}

/* Socials icons in folder */
.header-nav-folder-content>div:nth-child(n+5) {
    width: 20% !important;
    float: left !important;
}
/* Center menu social */
.header-nav-folder-item.header-nav-folder-item--external:nth-child(5) {
    margin-left: 0% !important;
}

@Ziggy Thank you so much for claring that up! It looks great now 😃 

3 minutes ago, SolveigTraeet said:

@Ziggy Thank you so much for claring that up! It looks great now 😃 

No problem, happy to help!

For the future: If you change the number of items in the navigation, it will have to be adjusted again.