How to add Social Icons to Main Navigation

[tuanphan]

To add Social Icons to Main Navigation Squarespace, you can follow these steps.

#1. First, EDIT SITE HEADER

#2. Click ADD ELEMENTS

#3. Enable Social Links

Result

#4. To add a space between Social Links – Navigation, use this code to Custom CSS box

div.header-nav-wrapper {
    margin-right: 3.9vw;
}

#5. To edit Social Links , you can click on Social > Click Edit

and you can add more links or remove links here

#6. On some smaller screen, you will see overlap between Nav links – Social Links, you can use this code to Code Injection > Footer to prevent this.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.header-display-desktop div.header-actions-action--social').appendTo('header#header nav');
});
</script>
<style>
header#header nav .header-actions-action--social {
    display: flex;
    flex-direction: row;
}
header#header nav .header-actions-action--social a {
    margin-left: 1.1vw;
    margin-right: 1.1vw;
}
header#header nav {
    flex-wrap: nowrap;
    align-items: center;
}
</style>