(Squarespace) Custom Header with Left (Logo - Navigation) - Right (Email)

[tuanphan]

To achieve a Header Layout like this. You can check demo here.

#1. First, edit Site Header

#2. Click Edit Design

#3. Choose this Header layout

#4. Hover on Logo > Click Add Elements

#5. Enable Button only

#6. Click on Button > Click Pencil icon

#7. Add your email

We will have

#8. Use this code to Custom CSS box.
If code doesn’t work, you can comment below, message or send me an email.

a.btn {
    background-color: transparent !important;
    border: none !important;
    color: #000 !important;
}
a.btn:before {
    content: "i";
    background-color: #ef3e69;
    display: inline-block;
    width: 40px;
    height: 40px;
    color: #fff;
    line-height: 40px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 18px;
}
div.header-nav-item>a {
    padding: 3px 5px !important;
}
div.header-nav-item>a:hover {
    background-color: rgba(17,17,17,.05);
}

Result

#9. You can adjust circle text/color/size here.

[romano97002 (Romano LAPINCE)]

@tuanphan,