Changing header logo URL on one page (mobile)

I have a secondary shop (separate from my main shop) in my site. When I am on the product details page on mobile, there is no way to get back to the secondary shop page.

Is there any way, with CSS, to do 1 of the following options (ideally both):

1. To change the header logo URL on the second shop page to redirect to  shannoncamillearts.com/reelsisterspod, rather than my main site (shannoncamillearts.com) on web and mobile.
2. Add breadcrumbs on the product details page on mobile (for some reason they are only appearing on the web version, not mobile)

Squarespace URL is: https://spinach-accordion-j2lf.squarespace.com/

Hi,

Can you share links to 2 shops? We can check easier

On 8/27/2023 at 1:14 AM, tuanphan said:

Hi,

Can you share links to 2 shops? We can check easier

Main shop: https://www.shannoncamillearts.com/shop

Secondary shop: https://www.shannoncamillearts.com/reelsisterspod

#1. Add this code to Reelsisterpod Page Settings > Advanced > Header (DO NOT use Custom CSS box)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.header-title-logo a, .header-mobile-logo a').attr('href','/reelsisterspod');
});
</script>

#2. Show it under image or above image?

On 9/2/2023 at 4:05 PM, tuanphan said:

#1. Add this code to Reelsisterpod Page Settings > Advanced > Header (DO NOT use Custom CSS box)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.header-title-logo a, .header-mobile-logo a').attr('href','/reelsisterspod');
});
</script>

#2. Show it under image or above image?

That worked! 

and for #2, above image. 

@tuanphan That did it! But oddly now my shop items are pushed to the left (in both shops) and not centered as before. Any idea why that is?

On 9/11/2023 at 7:23 AM, smoman said:

@tuanphan That did it! But oddly now my shop items are pushed to the left (in both shops) and not centered as before. Any idea why that is?

In CSS box, find & edit this code

@media only screen and (max-width: 640px) {
    .products .list-grid {
        display:flex;
        flex-wrap: wrap;
        justify-content: space-between
    }

    .products .grid-item {
        width: 48%
    }
}

to this

@media only screen and (max-width: 640px) {
    .products .list-grid {
        display:grid !important;
        grid-template-columns: 1fr 1fr !important;
    }

    .products .grid-item {
        width: 100% !important;
    }
}

18 hours ago, tuanphan said:

In CSS box, find & edit this code

@media only screen and (max-width: 640px) {
    .products .list-grid {
        display:flex;
        flex-wrap: wrap;
        justify-content: space-between
    }

    .products .grid-item {
        width: 48%
    }
}

to this

@media only screen and (max-width: 640px) {
    .products .list-grid {
        display:grid !important;
        grid-template-columns: 1fr 1fr !important;
    }

    .products .grid-item {
        width: 100% !important;
    }
}

 

Perfection! Thanks so much!

On 9/15/2023 at 9:04 AM, smoman said:

Perfection! Thanks so much!

Just an update. SS released an option to have 2 columns on mobile, without using code. 

See this image 

@tuanphan That's fantastic! Thanks so much for the heads up and for all the hard work you do in the forums! You are so helpful!

Can someone help me with my site? I was able to change to a light logo version on desktop view but not on mobile pages within my portfolio. Screenshots attached & here's a link to my site: https://www.catmoutoux.com/

Which exact page are you referring to? It looks fine on this page

https://www.catmoutoux.com/portfolio/project-one-ephnc-mexsa

I have changed my logo on one specific page using below for desktop:

<style>

 .Header-nav {

 display: none;

 }

.has-logo-image .Header-branding {

background-image:url(https://images.squarespace-cdn.com/content/5ff6f1122e7a9d45b12a0ad0/c311d06a-9f1b-43a2-8dc7-0074cb1a191f/RDSA-logo-2-colour.png?content-type=image%2Fpng);

background-size: none;

height: auto;

background-repeat: no-repeat;

background-position: center !important;

}

.has-logo-image .Header-branding img {

opacity:0 !important;

}

</style>

How do I replicate it so the logo is also changed for mobile (on that one page only)?

I'm on SS 7.0 Heights template

thanks

On 7/17/2024 at 3:15 PM, NickHardman said:

I have changed my logo on one specific page using below for desktop:

<style>

 .Header-nav {

 display: none;

 }

.has-logo-image .Header-branding {

background-image:url(https://images.squarespace-cdn.com/content/5ff6f1122e7a9d45b12a0ad0/c311d06a-9f1b-43a2-8dc7-0074cb1a191f/RDSA-logo-2-colour.png?content-type=image%2Fpng);

background-size: none;

height: auto;

background-repeat: no-repeat;

background-position: center !important;

}

 

.has-logo-image .Header-branding img {

opacity:0 !important;

}

</style>

 

How do I replicate it so the logo is also changed for mobile (on that one page only)?

I'm on SS 7.0 Heights template

thanks

What is your site url?