Navigation links either side of logo in site header

15 hours ago, tuanphan said:

Hi. I see no navigation here. Can you check it again?

HI @tuanphan I currently have the navigation links hidden from view. 

Hi all @tuanphan @creedon

I'm also trying to move one of my navigation links (the word Play) to the right side of the site header. I haven't had success following the CSS advice on this forum. I have zero experience coding so this might be why. I would be incredibly thankful for your advice/guidance on this. Thank you.

Website: https://helix-walrus-rd7b.squarespace.com/config/settings/site-visibility

Password: 1q2w3e4r5t

Hi @tuanphan !

I'm trying to achieve the split navigation on this restaurant site. Are you able to help? 

https://sawfish-tulip-pxkb.squarespace.com/config/settings

password: detention

On 7/8/2021 at 1:54 AM, Karinaepf said:

Hi all @tuanphan @creedon

I'm also trying to move one of my navigation links (the word Play) to the right side of the site header. I haven't had success following the CSS advice on this forum. I have zero experience coding so this might be why. I would be incredibly thankful for your advice/guidance on this. Thank you.

Website: https://helix-walrus-rd7b.squarespace.com/config/settings/site-visibility

Password: 1q2w3e4r5t

Oh. Sorry. Didn't see the notification. Do you still need help?

4 hours ago, sheasdesign said:

Hi @tuanphan !

I'm trying to achieve the split navigation on this restaurant site. Are you able to help? 

https://sawfish-tulip-pxkb.squarespace.com/config/settings

password: detention

It looks like you solved with CSS. Do you still need help?

@tuanphan

I was able to achieve the split navigation, but I came to realize that the "second nav" appears on some pages, but not on others, despite it being a sticker header nav.

Do you know why that is or how I can fix this? I have both site styles and CSS to set the nav links as white. I notice it is there, just not appearing in white.

https://clavichord-cardioid-355d.squarespace.com/c
pass: morocco

(for example home page vs retreats/faqs page) - its showing up differently...

--

.dark .header-nav-item a {
 color: #ffffff !important;
}

Hi @tuanphan

I am also looking to split my navigation to either side of the logo in the header.
I've already used some code I found to be able to place a search bar in the header which I'll need to adjust the margins on, but I'll do that once I've got the navigation placement sorted.
Are you able to help please? I'm on version 7.1.
 

https://keyboard-avocado-5gx3.squarespace.com/config/
password: summertime

Thank you very much in advance

On 8/18/2021 at 8:37 AM, graceandoak said:

@tuanphan

I was able to achieve the split navigation, but I came to realize that the "second nav" appears on some pages, but not on others, despite it being a sticker header nav.

Do you know why that is or how I can fix this? I have both site styles and CSS to set the nav links as white. I notice it is there, just not appearing in white.

https://clavichord-cardioid-355d.squarespace.com/c
pass: morocco

(for example home page vs retreats/faqs page) - its showing up differently...

--

.dark .header-nav-item a {
 color: #ffffff !important;
}

Hi, Sorry for the delay.

It looks like you fixed problem with Script code?

On 8/19/2021 at 11:16 PM, char_maulson said:

Hi @tuanphan

I am also looking to split my navigation to either side of the logo in the header.
I've already used some code I found to be able to place a search bar in the header which I'll need to adjust the margins on, but I'll do that once I've got the navigation placement sorted.
Are you able to help please? I'm on version 7.1.
 

https://keyboard-avocado-5gx3.squarespace.com/config/
password: summertime

Thank you very much in advance

Hi. I see you solved this

@tuanphan yes, though is there a way to force it to stay in one line when it changes screen sizes? The font size is as small as it is; or is there a way to fix the padding around the logo?

On 8/24/2021 at 4:41 AM, graceandoak said:

@tuanphan yes, though is there a way to force it to stay in one line when it changes screen sizes? The font size is as small as it is; or is there a way to fix the padding around the logo?

Add to Design > Custom CSS

nav.header-nav-list, .header-actions {
    white-space: nowrap !important;
}

On 8/22/2021 at 12:07 AM, tuanphan said:

Hi, Sorry for the delay.

It looks like you fixed problem with Script code?

Hi. I see you solved this

Hi @tuanphan Thanks for your help on the split nav. I wondered if you might be able to help me find a way to move the search box I've placed via code, into the header?

I've currently got it on the left of the header, but the client would like to place it above the social links - do you know if this is possible with the code I've used? Site details below again:

https://keyboard-avocado-5gx3.squarespace.com/config/
password: summertime

Thanks in advance

On 9/6/2021 at 6:24 PM, char_maulson said:

Hi @tuanphan Thanks for your help on the split nav. I wondered if you might be able to help me find a way to move the search box I've placed via code, into the header?

I've currently got it on the left of the header, but the client would like to place it above the social links - do you know if this is possible with the code I've used? Site details below again:

https://keyboard-avocado-5gx3.squarespace.com/config/
password: summertime

Thanks in advance

You want this?

Hi @tuanphan Yes, that's exactly what we're looking for. Is it possible? TIA

20 hours ago, char_maulson said:

Hi @tuanphan Yes, that's exactly what we're looking for. Is it possible? TIA

Add to Last Line in Code Injection > Footer

<style>
.header-actions.header-actions--right {
    order: 9;
}
  .sqs-block.search-block.sqs-block-search.header-search-bar {
    order: 7;
}
.sqs-block.search-block.sqs-block-search.header-search-bar {
    order: 7;
    position: absolute;
    z-index: 999;
    right: 0;
    top: -30px;
    width: 15%;
}
</style>

Thank you again @tuanphan you're a star! That's worked 🙂

Is there a way to get my logo in the center of my header instead of the left corner? 

I don't see an option in the editor

www.healingtimejourney.com

@Shine1234

Edit the site header.

Click on the desktop icon.

Click on Header Layout.

Select the option with the logo in the center.

Let us know how it goes.

 @tuanphan !

Same issue, slightly different circumstances. I have hidden a few of the nav links and it caused the layout to be uneven. I am looking to just more the "Reviews" link in the nav to the other side of the logo. 

The site is in theme: Pacific on Squarespace 7.0.

Site:

https://www.sunsetsingers.com/

11 hours ago, kpappas said:

 @tuanphan !

Same issue, slightly different circumstances. I have hidden a few of the nav links and it caused the layout to be uneven. I am looking to just more the "Reviews" link in the nav to the other side of the logo. 

The site is in theme: Pacific on Squarespace 7.0.

 

Site:

https://www.sunsetsingers.com/

Which code did you use?

@tuanphan

#mainNavigation > div:nth-child(X) > a,
 {display: none;}

to hide in the main nav and

#mainNavigation a[href*="/#home-section"],
 #overlayNav #mobileNavWrapper nav div a[href*="/#home-section"] {display:none;}

for mobile. 

But I need the Reviews link to move to the other side of the logo so they are balanced. See referenced image above. Thank you for your help!!

10 hours ago, kpappas said:

@tuanphan

#mainNavigation > div:nth-child(X) > a,
 {display: none;}

to hide in the main nav and

#mainNavigation a[href*="/#home-section"],
 #overlayNav #mobileNavWrapper nav div a[href*="/#home-section"] {display:none;}

for mobile. 

 

But I need the Reviews link to move to the other side of the logo so they are balanced. See referenced image above. Thank you for your help!!

Did you changed layout? It looks different now

@tuanphan

In the meantime, I left aligned the logo and right aligned the links. But that is just placeholder until I can figure out how to balance the links on either side of the logo when the logo is centered. 

On 10/13/2022 at 12:35 AM, kpappas said:

@tuanphan

In the meantime, I left aligned the logo and right aligned the links. But that is just placeholder until I can figure out how to balance the links on either side of the logo when the logo is centered. 

Hi,

It looks like you solved this?

I have not solved this yet. I'm looking to center the logo and have the nav links we want visible balanced on either side of the logo. 

@tuanphan

@tuanphan

Specifically looking to more the Reviews link to the left side of the logo.