Need code to change "header layout" on single page

Hello everyone,

I'm wondering if the following is possible:

I would like one header layout on the homepage of my site and a different "header layout" for the remaining pages.

For the site, I have the header layout chosen that puts the logo in the center and the navigation below it. I have hidden the logo, as I have put the logo large in the section immediately below it. For my purposes, it looks exactly how I'd like it to look.

However, for the rest of the site I want the logo visible (which it currently is as the code I used to hide the logo only applied to the homepage). However, I would like to select a different "header layout" on the other pages. I would like to use the layout with the logo on the left and the navigation items next to the logo instead of below.

I can't find any code to target the "header layout" specifically. I would imagine that targeting the homepage would make more sense as it's the only page on the site with a different header layout. But whatever solution works best I am very open to. Thanks in advance if anyone can help out with this. I've attached images to illustrate what I'm talking about.

What is your site url? We can check easier

Hi, this is my logo info:

https://beige-lobster-adm6.squarespace.com/

Password: square207

Add to Design > Custom CSS

/* Left logo right nav */
body:not(.homepage) {
.header-title {
    flex: 0 0 30% !important;
}
.header-title-nav-wrapper .header-nav {
    flex: 0 0 70% !Important;
}
div.header-nav-item a {
    line-height: 30px;
}
}

11 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Left logo right nav */
body:not(.homepage) {
.header-title {
    flex: 0 0 30% !important;
}
.header-title-nav-wrapper .header-nav {
    flex: 0 0 70% !Important;
}
div.header-nav-item a {
    line-height: 30px;
}
}

 

That was amazing! Worked perfectly. One small issue, I'd love for all of the nav items to be on a single line. Is there a bit of code that I could add to reduce the font size? Thanks so much 🙂

On 5/11/2023 at 1:23 AM, dross said:

That was amazing! Worked perfectly. One small issue, I'd love for all of the nav items to be on a single line. Is there a bit of code that I could add to reduce the font size? Thanks so much 🙂

Use this new code

/* Left logo right nav */
body:not(.homepage) {
.header-title {
    flex: 0 0 30% !important;
}
.header-title-nav-wrapper .header-nav {
    flex: 0 0 70% !Important;
}
div.header-nav-item a {
    line-height: 30px;
}
nav {
	flex-wrap: nowrap !important;
}
}

11 hours ago, tuanphan said:

Use this new code

/* Left logo right nav */
body:not(.homepage) {
.header-title {
    flex: 0 0 30% !important;
}
.header-title-nav-wrapper .header-nav {
    flex: 0 0 70% !Important;
}
div.header-nav-item a {
    line-height: 30px;
}
nav {
	flex-wrap: nowrap !important;
}
}

 

Thanks again. That ended up putting the logo back on top, but I did figure it out in the end. I just added this line of code:

font-size: 1.8vw;