Jump to content

Trying to create 2 mini sites that branch off an unlinked landing page where each mini site has its own split nav and a different header logo

Recommended Posts

I'm a designer with two very different type of clients.  Interior Design/Environments clients and Motorsports livery/apparel clients. That being the case, I was trying to essentially create two mini sites under my domain.  

The idea was, create an unlined landing page where the client could branch off to the appropriate site for them.  I've created 8 pages in total under the Main Navigation.  

For "M73 Studio" there are the following pages

about

services

work

contact

For "M73 Motorsports" there are the following pages

about

services

work

contact

 

Using the following code in the M73 Studio pages, I was about to get only the 1st for pages to show up in the nav and have that nav be split with about and services to the left of the header logo and work and contact to the right.

<style>
  
  /* Logo size */
.header-title-logo img, .header-title-logo a {
    max-height: 100px !important; 
}

.header-title {
    width: 70% !important;
}
  
/* hide items on desktop */
nav.header-nav-list>div:nth-child(5), nav.header-nav-list>div:nth-child(6), nav.header-nav-list>div:nth-child(7),
  nav.header-nav-list>div:nth-child(8){
    display: none;
}
/* hide items on mobile */
[data-folder="root"]>div:first-child>div:first-child>div:nth-child(4), [data-folder="root"]>div:first-child>div:first-child>div:nth-child(5), [data-folder="root"]>div:first-child>div:first-child>div:nth-child(6) {
    display: none;
}
  @media only screen and (min-width: 1030px){ 
.header-nav {
 position: absolute;
 margin-top:0!important;
 top: 2.5rem; 
}

.header-nav-item:nth-of-type(2) {
 margin-right: 33vw!important; 
}

.header-title {
 z-index: 99!important;
 } 
}
</style>

 

For the M73 Motorsports pages using similar code I was about to get the other four pages to show up in the nav, but I tried to replace the header logo with the a different logo.  I got the alternate header logo to show up and be centered and at the size I wanted, but suddenly the split nav acted as though there was no header logo and simply showed up centered on the header behind the alternate logo.  Below is the code I used on those four pages.  I should note the code was added to the /advanced/page header code injection area on all the pages.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

<script>
$(document).ready(function() {
$('div.header-title a').attr('href','https://m73studio.com');
});
</script>

<style>
  
  /* Logo size */
.header-title-logo a { content: url(https://images.squarespace-cdn.com/content/65d93d57b9b4d4002e82a51b/1708735836483-WZCTHWRZHV0Q13XMUF0A/M73+Logo+Final+Lockups+11_16_23+%5BRecovered%5D-34.png?content-type=image%2Fpng);
  
    max-height: 200px !important; 
}

.header-title {
    width: 70% !important;
}
  
/* hide items on desktop */
nav.header-nav-list>div:nth-child(1), nav.header-nav-list>div:nth-child(2), nav.header-nav-list>div:nth-child(3), nav.header-nav-list>div:nth-child(4){
    display: none;
}
/* hide items on mobile */
[data-folder="root"]>div:first-child>div:first-child>div:nth-child(1), [data-folder="root"]>div:first-child>div:first-child>div:nth-child(2), [data-folder="root"]>div:first-child>div:first-child>div:nth-child(3),[data-folder="root"]>div:first-child>div:first-child>div:nth-child(4) {
    display: none;
}
  @media only screen and (min-width: 1030px){ 
.header-nav {
    position: absolute;
    top: 30px;
    bottom: 0;
    margin-top: 0!important;
    margin-left: 0px!important;
}

.header-nav-item:nth-of-type(2) {
    margin-right: 300px!important;
}

.header-title-logo a {
    z-index: 1000;
    position: relative;
}
</style>

 

Any idea how to get the pages with the alternate logo to recognize it exists and have the nav links flank it left and right? Just to note, I do have a business plan.

Screenshot 2024-03-01 170934.png

 

Screenshot2024-03-01170921.thumb.png.c71ac3d293f7986e3b20953e46466dbc.png

Edited by waltari
added information
Link to comment
  • Replies 0
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

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.