Jump to content

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

Recommended Posts

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

place Facebook symbol first, beside Tiktok, instagram, twitter and contact.jpg

Link to comment

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

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
🔌
 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 Did I help? Buy me a coffee?

Link to comment
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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
🔌
 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 Did I help? Buy me a coffee?

Link to comment

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.