I recently got some questions, content like this.

“I want to create “2 websites” on my current domain, without paying for a new subscription. How should I do?”

In this post, I will show you how to solve this problem. You can do this for all plans, including the personal plan.

Suppose I need to create 2 websites: Coffee Shop & Church.

• with different headers/navigation bars
• Logo will link to the corresponding homepage of each website

The code here only runs on Squarespace 7.1. If you use other templates, ask me a question (free), I will adjust the code for your site.

Step 1. Create Pages

First you need to create the necessary pages for 2 web and add to Main Navigation.

An important note, pages need to have the following URL.

• /church/about
• /church/contact
• /church/events
• /church/team
• /coffee/locations
• /coffee/menu
• /coffee/order
• /coffee/our-story

Your header will have

Step 2. Make Header for Church Site

In this step, we will remove Coffee Pages on Church Navigation Bar.

Open Church Pages Header (all pages) > Add below code

(You can also edit pages > Insert Code Block > Add below code)

<style>
header#header [href*="/coffee/"] {
    display: none;
}
</style>

and result

Step 3. Make Header for Coffee Site

In this step, we will remove Church Pages on Coffee Navigation Bar.

Open Coffee Pages Header (all pages) > Add below code

(You can also edit pages > Insert Code Block > Add below code)

<style>
header#header [href*="/church/"] {
    display: none;
}
</style>

and result

Step 4. Change Logo Link

By default, when you click on the Logo, it will return to the homepage.
However we can change this.

• Change the link to Landing Page, where visitors can select the website they want to visit
• or change the logo link to the respective homepage for each website.

For this step, I will use Option 1, change the link to Landing Page.

Add this code to Home > Settings > Advanced > Code Injection > Footer

Replace beaverhero.com with landing page url.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $(".header-title-logo a").attr("href", "https://beaverhero.com");
});
</script>

Done. If you have any other questions, just ask me a question via form below.

Update

Brine Template Family

Add to Church Page Headers

<style>
header.Header [href*="/coffee/"] {
    display: none !important;
}
.Mobile.loaded [href*="/coffee/"] {
    display: none !important;
}
[data-controller-folder-toggle*="coffee"] {
    display: none;
}
</style>

Add to Coffee Page Headers

<style>
header.Header [href*="/church/"] {
    display: none !important;
}
.Mobile.loaded [href*="/church/"] {
    display: none !important;
}
[data-controller-folder-toggle*="church"] {
    display: none;
}
</style>

Add to Code Injection Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $("a.Mobile-bar-branding, a.Header-branding").attr("href", "https://beaverhero.com");
});
</script>

Skye template family

You need to note a bit when creating “2 sites” on Skye.

Pages in Main Navigation need to follow the following order.

• Church Page
• Coffee Page
• Church Page
• Coffee Page
• …

then add to Church Page Headers

<style>
nav#mainNavigation>div:nth-child(even) {
    display: none;
}
</style>

and add to Coffee Page Headers

<style>
nav#mainNavigation>div:nth-child(odd) {
    display: none;
}
</style>

 

FAQ

Can I use different footers for 2 sites?

Yes. You can. It is a bit difficult to write, of course. You can create 2 footers, then contact me via this form. I will adjust the code for you.

Can I create 3 sites on the same subscription?

You can create 3 or more websites on the same subscription, but the code will be more complicated.

Basically you will need to change the code above, to hide Web 1, Web 2 Navigations when in Web 3, and vice versa.