Changing Header CSS for 1 page only

Site URL: https://springtail-violin-hntl.squarespace.com/

Hi guys,

I've searched on google and the forum but there are a few steps I couldn't figure out yet (most of the css I searched and fixed myself)

I know the settings within the GUI that I'd like, but I don't know how to translate them to the CSS code. 

Link: https://springtail-violin-hntl.squarespace.com/
Password: waterkant

The settings I'd like are as follows:

HEADER Homepage:
Home -> Design -> Site styles -> Fonts -> Assign Styles -> Site Navigation -> Size -> Custom 1.4rem
Home -> Edit (page) -> Edit Site Header -> Desktop Icon -> Link Spacing 3.0

exclude the header social icons solved
exclude the header button solved

HEADER everywhere else: 
1: (solved)

Home -> Design -> Site styles -> Fonts -> Assign Styles -> Site Navigation -> Size -> Paragraph 2
include the header social icons
include the header button
Home -> Edit (page) -> Edit Site Header -> Desktop Icon -> Link Spacing 1.5

2:
site header to fit with the 'content width' of '89' as the rest of the site follows this as well (same as footer for example)

-----

Other minor steps I'd love to figure out:

'over ons' page:
have the picture of Marlies the women above the text on mobile (basically flip the 2 boxes in the section for mobile)

across the whole site:
I would love a 'back to top button' on the bottom right saying "^" (for mobile and desktop), I have no idea how. Is this a feature inside squarespace?

Hope the description makes sense, if not please let me know so I can elaborate

Thanks so much in advance,
Kind regards 
Patrick de Waal

Ok I've found a way to hide the social buttons and the call to action button (although I don't understand why the call to action button disappeared too, but I'm happy with that)

for anyone interested:

#collection-62b5d23448db021d6f6b48e3{

  .header-actions-action, .header-actions-action--social{
    display: none !important;
  }

Haven't found solution to the rest yet, I will keep searching, hope someone can send me into the right direction:
 

• how to change header menu text size and link space for 1 page only
• how to swap 2 blocks within a section on mobile view
• how to have a scroll up floating button 

Thanks in advance,

Cheers
Patrick

#1. Add to Page Header (page where you want to change header text size)

<style>
  div.header-nav-item a {
    font-size: 30px;
}
</style>

#2. Which 2 blocks are you referring to?

#3. First, add this to Design > Custom CSS

/**
 * Back To Top Button Styles
 * From Will-Myers.com
 */
#wm-back-to-top {
  z-index:999;
  position:fixed;
  display:flex;
  bottom:0;
  right:0;
  min-width: 50px;
  min-height: 50px;
  flex-direction: column;
  gap: 8px;
  align-items:center;
  justify-content:center;
  box-sizing:content-box;
  margin: 8px;
  padding: 5px;
  cursor:pointer;
  opacity:0;
  overflow:hidden;
  transform: translateY(0px) scale(1);
  background:transparent;
  border-radius: 0px;
  border-width: 0px;
  border-color: #000000;
  border-style:solid;
  visibility:hidden;
  transition: opacity .3s ease,
    transform .3s ease,
    visibility 0s ease .3s;
  will-change:transform;
  backdrop-filter: blur(0px);

  &.show{
    transform: translateY(0px);
    opacity:1;
    visibility: visible;
    transition: opacity .3s ease,
      transform .3s ease,
      visibility 0s ease 0s;
  }
  .icon{
    position:relative;
    display:flex;
    justify-content:center;
    line-height:0;
    height:auto;
    width:auto;
  }
  .text{
    position:relative;
    margin:0;
    font-size: 0.8rem;
    font-weight: 500;
    color: #000000;
    text-transform: uppercase;
  }
  svg{
    width: 20px;
    height: 20px;
  }
  path{
    stroke-width: 5px;
    stroke: #000000;
  }
  .btt-background {
    box-sizing:border-box;
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-color: #f5f5f5;
    opacity: 1;
    transition: opacity .3s ease;
  }

  &:hover{
    transform:translateY(-3px);
    opacity: .85;
  }
  &:active{
    transform: translateY(-3px) scale(.95);
  }
}

Next, add this to Code Injection > Footer

<!-- Scroll To Top Button HTML -->
<button id="wm-back-to-top">
  <div class="btt-background"></div>
  <div class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title" role="img" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>Angle Up</title>
      <path data-name="layer1" fill="none" stroke="#202020" stroke-miterlimit="10" stroke-width="2" d="M4 42 l28 -26 L60 42" stroke-linejoin="round" stroke-linecap="round"></path>
    </svg>
  </div>
  <p class="text">To Top</p>
</button>

<!-- Scroll To Top Button Javascript -->
<script>
(function() {
  let throttlePause;

  document.addEventListener('click', function(e) {
    if (!e.target.closest('#wm-back-to-top')) return;
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    })
  })

  const throttle = (callback, time) => {
    if (throttlePause) return;

    throttlePause = true;
    setTimeout(() => {
      callback();
      throttlePause = false;
    }, time);
  };

  const checkPos = () => {
    let pos = document.documentElement.scrollTop,
        revealHeight = window.innerHeight * 0,
        bttButton = document.querySelector('#wm-back-to-top');
    if (pos >= revealHeight) {
      bttButton.classList.add('show');
    } else {
      bttButton.classList.remove('show');
    }
  }

  window.addEventListener("scroll", () => {
    throttle(checkPos, 150);
  });
  window.addEventListener('DOMContentLoaded', checkPos)
}());
</script>

Hi tuanphan, 

Great! thanks for the code

#1 it worked

How can I add bigger 'Link Spacing'? (Home -> Edit (page) -> Edit Site Header -> Desktop Icon -> Link Spacing '3.0')

#2 please see attached images. I want to flip number 3 and 4 for mobile only

#3 It says javascript cannot run in personal plan. are there alternatives?

Thanks so much,

Cheers
Patrick
 

#1. Use this code under

div.header-nav-item {
    margin-right: 2vw;
    margin-left: 2vw;
}

#2. Use this code

@media screen and (max-width:767px) {
div#page-section-62b6e393fb85de505e37e3ba>.row {
    display: flex;
    flex-direction: column-reverse;
}
}

#3. Edit Site Footer > Add a Code Block > Paste this code

<a href="#top" class="t-top"><span class="arrow"></span>Top</a>
<style>
  /* Back to Top */
.t-top {
    font-weight: 300;
    letter-spacing: 3px;
    font-size: 15px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
    padding-left: 2px;
    padding-top: 4px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 40px;
    height: 40px;
    z-index: 999;
    background-color: transparent;
    color: #000;
}
.t-top .arrow:before {
      font-family: 'squarespace-ui-font';
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    content: "\e02d";
    text-align: center;
    display: block;
    vertical-align: middle;
    transform: rotate(-90deg);
    cursor: pointer;
    margin-left: -4px;
}
.t-top .arrow {display:inline;}
</style>

tuanphan Thanks so much!

#1 fixed
#2 fixed
#3 fixed

If I click twice on the scroll to top button, it doesn't work. I assume because the url is already "[url/page]#top"

Is there a workaround for this? 

you are amazing, this has been such great help 😎💪🏻

15 hours ago, pjdewaal said:

tuanphan Thanks so much!

#1 fixed
#2 fixed
#3 fixed

If I click twice on the scroll to top button, it doesn't work. I assume because the url is already "[url/page]#top"

Is there a workaround for this? 

 

you are amazing, this has been such great help 😎💪🏻

Yes. Maybe.