Fixed navigation, floating logo. How?

Site URL: https://yarzatwins.com

Hello All!

I am looking to create a header effect similar to that of the amazing Yarza Twins. This site was profiled on squarespace's  site an won me over. https://yarzatwins.com

Any idea how to make a fixed navigation bar and scrollable logo?

Bonus points if you can tell me how they modified the navigation text styles too. Really like the highlighted active page, as opposed to SS's standard underline.

Version 7.1 please!

Thanks in advance to this awesome group.

Can you share link to your site? I think we can achieve this with custom CSS

Hi Tuanphan!

Thank you for your reply. It's still a work in progress, but my site can be found at: saintim.com

On 12/2/2021 at 11:53 PM, seriouslytim said:

Hi Tuanphan!

Thank you for your reply. It's still a work in progress, but my site can be found at: saintim.com

It looks like you figured it out? Or you want to keep logo sticky only, remove nav on scroll?

Unfortunately, it didn't figure it out. Totally stuck over here 😶

The goal is to treat the logo and navigation separately. The navigation bar will stay fixed at the top and the logo will scroll with page content. Check out this site as an example of the outcome I'd like to achieve: https://yarzatwins.com

On 12/5/2021 at 10:59 PM, seriouslytim said:

Unfortunately, it didn't figure it out. Totally stuck over here 😶

The goal is to treat the logo and navigation separately. The navigation bar will stay fixed at the top and the logo will scroll with page content. Check out this site as an example of the outcome I'd like to achieve: https://yarzatwins.com

Do you use Personal or Business Plan?

If Personal Plan, you can enable fixed header, then we will give the code to remove navigation/icon on scroll, keep logo scroll only.

If Business plan, let me know, we will give some script code to achieve this, it will be better than above way.

8 hours ago, tuanphan said:

Do you use Personal or Business Plan?

If Personal Plan, you can enable fixed header, then we will give the code to remove navigation/icon on scroll, keep logo scroll only.

If Business plan, let me know, we will give some script code to achieve this, it will be better than above way.

You are amazing! I'm using a business plan 👍

any updates on a code where the navigation bar sticks and only the logo scrolls?

On 10/13/2022 at 7:44 AM, nahlah said:

any updates on a code where the navigation bar sticks and only the logo scrolls?

What is your site url?

Has Anyone found a solution to this? 

I'm on 7.1 and have forced the mobile nav to appear on desktop and would like the hamburger menu to stay stationary, but the logo to scroll (and reappear on scroll-back). So I guess like this but opposite - so instead of floating logo, and fixed navigation - I would like fixed logo and floating nav. 

Any help would be greatly appreciated! 

On 7/6/2023 at 8:55 AM, L_Avec said:

Has Anyone found a solution to this? 

I'm on 7.1 and have forced the mobile nav to appear on desktop and would like the hamburger menu to stay stationary, but the logo to scroll (and reappear on scroll-back). So I guess like this but opposite - so instead of floating logo, and fixed navigation - I would like fixed logo and floating nav. 

Any help would be greatly appreciated! 

What is site url? We can check easier

Hi there! I am trying to achieve the same thing: sticky logo that scrolls with content, navigation that stays fixed to the top.

Site is www.deguayhaus.com

Any help will be so appreciated 🙂

On 7/16/2024 at 1:57 AM, ampii said:

Hi there! I am trying to achieve the same thing: sticky logo that scrolls with content, navigation that stays fixed to the top.

Site is www.deguayhaus.com

Any help will be so appreciated 🙂

You can use this code to Website Tools > Custom CSS

header.Header.Header--top {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 99999;
}