Go back to previous spot on page where you left off when clicking the Back button

When I click the back button to go back to the previous page it brings me to the top. How do i have it bring me to where i left off.

Also, can someone help me center the navigation folder items beneath the tab that i hover over. For example when I'm on Products, can the folder items beneath it be centered under Products. 

https://www.twinforkswindow.com/

On 8/29/2023 at 9:09 PM, TFWC said:

Also, can someone help me center the navigation folder items beneath the tab that i hover over. For example when I'm on Products, can the folder items beneath it be centered under Products. 

 

https://www.twinforkswindow.com/

 

Add this to Custom CSS box

/* center dropdown */
.header-nav-folder-content {
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: Unset !important;
    width: 100% !important;
    justify-content: center !important;
}

.header-nav-item.header-nav-item--folder {
    position: relative !important;
}

On 8/28/2023 at 12:08 PM, TFWC said:

When I click the back button to go back to the previous page it brings me to the top. How do i have it bring me to where i left off.

@tuanphan @TFWC

Hi, I'm also having the same problem, BUT on the mobile version of my website only. 

When I return to the previous page on the desktop version, I like that I can return to the same place I was previously on, but on the mobile version, I do not like that the page refreshes to the top. 

This problem occurred after Squarespace's recent update in August. 😵‍💫 

• Attached is a screen recording of my mobile site where I demonstrate scrolling down a store page to a product page, accessing the product page, and then returning to the store page. 

• Also attached is a screen recording of my desktop site where I demonstrate the same sequence as in the mobile version. 

As you can see, the mobile version returns to the top of the page whereas the desktop version returns to the previous position. 

I assume this is a relatively easy fix?  

On 9/2/2023 at 9:47 PM, tuanphan said:

Add this to Custom CSS box

/* center dropdown */
.header-nav-folder-content {
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: Unset !important;
    width: 100% !important;
    justify-content: center !important;
}

.header-nav-item.header-nav-item--folder {
    position: relative !important;
}

 

When I added this to my site it made the dropdown menu disappear before I could click Sky-Frame or Brochure. I could only click Fleetwood and installation so I had to remove. I also think it would be better if it wasn't centered but if Sky-Frame was directly under products.

On 9/3/2023 at 5:33 PM, CptFeeny said:

@tuanphan @TFWC

Hi, I'm also having the same problem, BUT on the mobile version of my website only. 

When I return to the previous page on the desktop version, I like that I can return to the same place I was previously on, but on the mobile version, I do not like that the page refreshes to the top. 

This problem occurred after Squarespace's recent update in August. 😵‍💫 

• Attached is a screen recording of my mobile site where I demonstrate scrolling down a store page to a product page, accessing the product page, and then returning to the store page. 

• Also attached is a screen recording of my desktop site where I demonstrate the same sequence as in the mobile version. 

As you can see, the mobile version returns to the top of the page whereas the desktop version returns to the previous position. 

I assume this is a relatively easy fix?  

Try to Code Injection > Footer

<!-- by @nhannhot-tuanphan -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(() => {
function scrollToAnchor(aid){
    var aTag = $(aid);
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

scrollToAnchor(location.hash);
})
</script>

On 9/5/2023 at 11:47 PM, TFWC said:

When I added this to my site it made the dropdown menu disappear before I could click Sky-Frame or Brochure. I could only click Fleetwood and installation so I had to remove. I also think it would be better if it wasn't centered but if Sky-Frame was directly under products.

So you still need or did you solve?

23 minutes ago, tuanphan said:

Try to Code Injection > Footer

<!-- by @nhannhot-tuanphan -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(() => {
function scrollToAnchor(aid){
    var aTag = $(aid);
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

scrollToAnchor(location.hash);
})
</script>

 

@tuanphan Unfortunately that did not work. 

On 9/7/2023 at 4:26 AM, tuanphan said:

So you still need or did you solve?

I figured it out I think thank you.

I want to add a link to the bottom of my homepage but I cant because it's a full width gallery. I'd like it to look similar to the "SCROLL DOWN" text at the bottom of this website:

https://sawyerberson.com

But instead of "SCROLL DOWN", I want it to say ENTER. And i want it to link to:

https://www.twinforkswindow.com/aboutus

On 9/15/2023 at 1:00 AM, TFWC said:

I figured it out I think thank you.

I want to add a link to the bottom of my homepage but I cant because it's a full width gallery. I'd like it to look similar to the "SCROLL DOWN" text at the bottom of this website:

https://sawyerberson.com

But instead of "SCROLL DOWN", I want it to say ENTER. And i want it to link to:

https://www.twinforkswindow.com/aboutus

Actually you can add a Text Section with hypherlink under slideshow section, then we can give code to move this text section over slideshow to achieve your request

What do you think?

Sounds perfect. Can we position it so it's near the bottom and not centered?

@tuanphan

Can you also help me with one other thing while I have you here. I'm trying to make the font in my footer smaller and it's working for all the text except the links. Here's the code im using:

div#block-94e235425ee0a2897156 p {
    font-size: 13px !important;
}

div#block-bb7d7e9ebcf1f282a4e4 p {
    font-size: 13px !important;
}

You can see the text adjusts size but then the link "Legal" doesn't changing size. Same with my navigation links.

On 9/18/2023 at 10:23 PM, TFWC said:

Sounds perfect. Can we position it so it's near the bottom and not centered?

 

@tuanphan

Yes. You can add and let me know, I will check and give the code

On 9/18/2023 at 11:19 PM, TFWC said:

Can you also help me with one other thing while I have you here. I'm trying to make the font in my footer smaller and it's working for all the text except the links. Here's the code im using:

div#block-94e235425ee0a2897156 p {
    font-size: 13px !important;
}

div#block-bb7d7e9ebcf1f282a4e4 p {
    font-size: 13px !important;
}

You can see the text adjusts size but then the link "Legal" doesn't changing size. Same with my navigation links.

Use this CSS code

footer#footer li * {
    font-size: 12px !important;
}

I don't see Legal text. Can you take a screenshot?

6 hours ago, tuanphan said:

Yes. You can add and let me know, I will check and give the code

Use this CSS code

footer#footer li * {
    font-size: 12px !important;
}

I don't see Legal text. Can you take a screenshot?

I included the text section on the home screen. Can you also add the small vertical line seen on this page:

https://sawyerberson.com/

@tuanphan

On 9/21/2023 at 10:16 PM, TFWC said:

I included the text section on the home screen. Can you also add the small vertical line seen on this page:

https://sawyerberson.com/

@tuanphan

 

Hi,

Move this?

https://prnt.sc/_uLr9TLgce_t

Add this code to Website > Website Tools > Custom CSS

[data-section-id="650c5cbde2db0348dbefeb0a"] {
 & {
    margin-top: -100px;
}
.section-border, .section-background, & {
    background-color: transparent !important;
}

* {
    color: white;
    text-decoration: none !important;
}
.html-block p a span:after {
  content: "";
    display: block;
    width: 2px;
    height: 50px;
    background-color: white;
    animation: animateDownRepeat 7s forwards infinite;
    transform-origin: top center;
    color: white !important;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
}
@keyframes animateDownRepeat {
    0% {
        transform: scaleY(0);
        transform-origin: top
    }

    10% {
        transform: scaleY(1);
        transform-origin: top
    }

    90% {
        transform: scaleY(1);
        transform-origin: bottom
    }

    to {
        transform: scaleY(0);
        transform-origin: bottom
    }
}

Wow this amazing. Thank you!

Can you let me know what the code would be if I wanted to put a text section over a slideshow? So that I can just input the data section.

I want it to be similar to workshopapd.com mobile site. Also why does there mobile site have black at the top where the time and battery are shown and my mobile site has white? 

@tuanphan

On 9/24/2023 at 9:08 PM, TFWC said:

Wow this amazing. Thank you!

Can you let me know what the code would be if I wanted to put a text section over a slideshow? So that I can just input the data section.

I want it to be similar to workshopapd.com mobile site. Also why does there mobile site have black at the top where the time and battery are shown and my mobile site has white? 

@tuanphan

With black bar, I think it should be an option in iPhone??

With text, there are two options

(1) You can add a text block under slideshow, we can give code to move text over slideshow

(2) Or if you use a Business Plan or higher, let me know, I can give a jQuery code to add text, I think this way will better more than (1)

@tuanphan

On 9/27/2023 at 4:57 AM, tuanphan said:

With black bar, I think it should be an option in iPhone??

With text, there are two options

(1) You can add a text block under slideshow, we can give code to move text over slideshow

(2) Or if you use a Business Plan or higher, let me know, I can give a jQuery code to add text, I think this way will better more than (1)

@tuanphan I figured out how to make the mobile status bar black. If you have Allow Website Tinting enabled in Safari settings on your iphone then your mobile status bar (with the time and battery) will be the same color as the website's background. To override this you need to enter the following code in your Header Code Injection:

<meta name="theme-color" content="#000000" />

This will make the mobile status bar black.

Can you show me the code to move the text block over the slideshow. Is there a generic version that applies to all where i can just change the section id of the code?

On 9/28/2023 at 9:19 PM, TFWC said:

@tuanphan

@tuanphan I figured out how to make the mobile status bar black. If you have Allow Website Tinting enabled in Safari settings on your iphone then your mobile status bar (with the time and battery) will be the same color as the website's background. To override this you need to enter the following code in your Header Code Injection:

<meta name="theme-color" content="#000000" />

This will make the mobile status bar black.

Can you show me the code to move the text block over the slideshow. Is there a generic version that applies to all where i can just change the section id of the code?

Yes. It has generic code, but I don't remember the code, I will need to create slideshow, create text and test the code

So if you can add them, I can save some time

Just an update to this. If you need to move Slideshow Caption, over image, you can follow these

First you need to enable Slideshow Caption

Next, add some captions

text will appear under slideshow

Next, use this code to Website Tools (under Not Linked) > Custom CSS. The code will move text over Slideshow

figcaption.gallery-caption.gallery-caption-fullscreen-slideshow {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%,-50%) !important;
    margin: 0 !important;
    max-width: 1000px !important;
    height: auto !important;
}