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

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.

 

Edited March 2 by waltari
added information