Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Navigation links either side of logo in site header


Recommended Posts

Posted (edited)

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

Screen Shot 2021-07-07 at 1.51.04 PM.png

Edited by Karinaepf
Link to comment
  • 1 month later...
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

Screen Shot 2021-07-07 at 1.51.04 PM.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@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;
}

Edited by graceandoak
Link to comment

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

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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

Link to comment
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?

image.thumb.png.78d3f2458671badfaee63522f2b8cafb.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...