Header main logo to increase with scrolling up

Hello everyone!

I am trying to finalize the design of a page, and cannot identify the exact code for having a "cool" logo, which changes dimension when you scroll it.

The reference site where I have seen this feature and would like to have the same is:

https://niklas-jessen.squarespace.com/

Can you help me with this feature?

Can you share link to your site?

If you use SS 7.1, you can do this with some CSS

On 5/16/2020 at 5:30 AM, tuanphan said:

Can you share link to your site?

If you use SS 7.1, you can do this with some CSS

Hi! I am using Version 7.0– Brine family (Marta template).

Site URL: https://soybean-salamander-bm4z.squarespace.com/home

Pass: DUO2020

On 5/19/2020 at 12:11 AM, DuoDesign said:

Hi! I am using Version 7.0– Brine family (Marta template).

Site URL: https://soybean-salamander-bm4z.squarespace.com/home

Pass: DUO2020

You will need to use JavaScript to do this, a bit complicated & need Business Plan.

Which plan do you use?

2 hours ago, tuanphan said:

You will need to use JavaScript to do this, a bit complicated & need Business Plan.

Which plan do you use?

I have a Business Plan, but if it gets to complicated I will leave it as it is 🙂

I do have another question, maybe you can help me.

I found many codes for this but not sure if they are applicable to Brine - Marta.

I would like to change the current alphabetical order in my shop categories, and to order them in another way.

I found the below code but it doesn't work...

/*Reorder category list items on Marta*/

/*http://caniuse.com/flexbox*/
/*http://shouldiprefix.com/#flexbox*/

#collection-5719735837013bf7bb9fc122 .category-nav-links {
 display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
 display: -ms-flexbox;  /* TWEENER - IE 10 */
 display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
 display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */

 -webkit-justify-content: space-around; /* Safari 6.1+ */
 justify-content: center;
}

/*Set the order of each list item ('li'), starting from the second child (first child is not displayed)*/

/*"All"*/
#collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(2) {
order: 1;  
}

/*"Alpha Collection"*/
#collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(3) {
order: 2;  
}

/*"Bathroom Collection"*/
#collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(4) {
order: 8;  
}

/*" Bedroom Collection"*/
#collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(5) {
order: 7;  
}

/*"Kids Collection"*/
#collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(6) {
order: 5;  
}

/*"Kitchen Collection"*/
#collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(7) {
order: 3;  
}

/*"Living Room Collection"*/
#collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(8) {
order: 6;  
}

/*"Office Custom Collection"*/
#collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(9) {
order: 2;  
}

/*"Wall Panels Collection"*/
#collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(10) {
order: 4;  
}

@media only screen and (max-width:640px) {
 #collection-5719735837013bf7bb9fc122 .category-nav-links {
   -webkit-flex-flow: column;
   flex-flow: column;
 }
}

On 5/20/2020 at 9:43 PM, DuoDesign said:

I have a Business Plan, but if it gets to complicated I will leave it as it is 🙂

I do have another question, maybe you can help me.

I found many codes for this but not sure if they are applicable to Brine - Marta.

I would like to change the current alphabetical order in my shop categories, and to order them in another way.

I found the below code but it doesn't work...

 

Which order do you want?

8 hours ago, tuanphan said:

Which order do you want?

The categories should be as following:

Alpha Collection

Office Custom Collection

Kitchen Collection

Wall Panels Collection

Kids Collection

Living Room Collection

Bedroom Collection

Bathroom Collection

On 5/19/2020 at 12:11 AM, DuoDesign said:

Hi! I am using Version 7.0– Brine family (Marta template).

Site URL: https://soybean-salamander-bm4z.squarespace.com/home

Pass: DUO2020

Shop category in this link? https://soybean-salamander-bm4z.squarespace.com/shop2?password=DUO2020

With logo, it needs JavaScript, complex, I will check again in the next few days.

1 hour ago, tuanphan said:

Shop category in this link? https://soybean-salamander-bm4z.squarespace.com/shop2?password=DUO2020

Hi there! I'm continuously making updates to the site, and I have changed a bit the categories. 

I made 2 different folders, Home & Professional, and moved my products accordingly.

In this way I will be able to have my main two categories available separately, without having to create some complication for displaying them directly in the left column list.

But still, I would like to rearrange the categories according to my order, not alphabetical. 

In Home Furniture:

• Kitchen Collection
• Wall Panels Collection
• Kids Collection
• Living Room Collection
• Bedroom Collection
• Bathroom Collection

In Professional Furniture, it's OK the way it is, for the moment.

1 hour ago, tuanphan said:

With logo, it needs JavaScript, complex, I will check again in the next few days.

Don't worry about this issue. I have decided it looks better like it is now, fixed.

Highly appreciated your support!! 😊

22 hours ago, DuoDesign said:

 

In Home Furniture:

• Kitchen Collection
• Wall Panels Collection
• Kids Collection
• Living Room Collection
• Bedroom Collection
• Bathroom Collection

Add to Home Furniture Settings > Advanced > Header

<style>
@media screen and (min-width:641px) {
ul.ProductList-filter-list {
    display: flex;
    flex-direction: column;
}
}
/* All */
ul.ProductList-filter-list>li:nth-child(1) {
    order: 1;
}
/* Kitchen */
ul.ProductList-filter-list>li:nth-child(5) {
    order: 2;
}
/* Wall Panels */
ul.ProductList-filter-list>li:nth-child(7) {
    order: 3;
}
/* Kids */
ul.ProductList-filter-list>li:nth-child(4) {
    order: 4;
}
/* Living Room */
ul.ProductList-filter-list>li:nth-child(6) {
    order: 5;
}
/* Bedroom Room */
ul.ProductList-filter-list>li:nth-child(3) {
    order:6;
}
/* Bath Room */
ul.ProductList-filter-list>li:nth-child(2) {
    order: 7;
}
</style>

Works great! Thank you so much! 😁