Remove top header

Hi,

On mobile (and also on the 'about' page on desktop) I have this weird banner above my header with the photo. I've tried so many different code snippets to get rid of it, but nothing works.

I don't want it to become transparant, I want all my content to move up for like 132px. But I would like to keep my logo and hamburger and for them to stay sticky.

Can anyone help me?

Greetings Sander

Can you share your website URL? Thanks!

Oh, of course. I did so in creating this post, but it's not showing it.

https://www.sandercromba.ch/

I can't see this "weird banner" that you're describing, can you share some screenshots?

Hi Ziggy,

Sure, here is a screenshot. I only see it on mobile, not tablet or desktop. Do you see it as well?

Once I scroll it moves out of the screen to the top, but it always starts with this transparent banner at the top. I would just like the entire webpage to move up these 132px, because now it is pushing the content down.

Hope to hear from you.

Best,
Sander

That's part of the mobile header, I would guess it disappears because the fixed header hasn't been implemented correctly. What CSS or code have you got added to the website?

This is what I've got as Custom CSS:

 

// Set the full-width nav to fixed position //
 .Header {
     position: fixed !important;
     width: 50%;
     z-index: 890; 
 }

// Remove underline hyperlinks + change color //
h1 a, h2 a, h3 a{color: #5101ff!important; border-bottom-style: none !important;}

@media screen and (max-width: 781px) {

  h1 {
    font-size: 34px;
    line-height: 38px;
  }}

code {
    line-height: 0.2em;
    letter-spacing: 1.2px;
    font-size: 18px;
}

  @media screen and (max-width: 781px) {

  code {
    font-family: courier;
    line-height: 0.0px !important;
    letter-spacing: 0.8px;
    font-size: 16px;
}

// Animation first title on every page //
.Index-page:first-child .sqs-layout, .Intro .sqs-row {
  -webkit-animation: fade-text-anim 1.5s ease-in-out;
  animation: fade-text-anim 1.5s ease-in-out;
}

@keyframes fade-text-anim {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,30px,0);
    -moz-transform: translate3d(0,30px,0);
    -ms-transform: translate3d(0,30px,0);
    -o-transform: translate3d(0,30px,0);
    transform: translate3d(0,30px,0);
  }
  25% {
    opacity: 0;
    -webkit-transform: translate3d(0,30px,0);
    -moz-transform: translate3d(0,30px,0);
    -ms-transform: translate3d(0,30px,0);
    -o-transform: translate3d(0,30px,0);
    transform: translate3d(0,30px,0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}

// Text Highlight Selection Color //

::selection {
  background: #6661FF;
  color: #FFFFFF;
}
::-moz-selection {
  background: #772bf5;
  color: #FFFFFF;
}
//

// Mobile Menu Button //

@media screen and (max-width: 767px) {
.header--menu-open .header-menu .header-menu-cta a {
  font-size: 30px;
}
}

//* Hover underline main navigation */
.Header-nav-item:hover {
   border-bottom: 1px solid #6661FF;
}
//
    

// No hyphenation //

 p, h1, h2, h3 {
     -webkit-hyphens: manual !important;
        -moz-hyphens: manual !important;
         -ms-hyphens: manual !important;
             hyphens: manual !important;
   }

  
// Show home page block dependent on screen size // 
@media only screen and (max-width: 780px) { #home-banner { display: none; } } 
@media only screen and (min-width: 781px) { #home-banner-mobile { display: none; } 
  }
  }

I can't see any reason for the white header background in your code, but there are a few errors that I've corrected here:

// Set the full-width nav to fixed position //
 .Header {
     position: fixed !important;
     width: 50%;
     z-index: 890; 
 }

 

// Remove underline hyperlinks + change color //
h1 a, h2 a, h3 a{color: #5101ff!important; border-bottom-style: none !important;}

@media screen and (max-width: 781px) {

  h1 {
    font-size: 34px;
    line-height: 38px;
  }}

code {
    line-height: 0.2em;
    letter-spacing: 1.2px;
    font-size: 18px;
}

  @media screen and (max-width: 781px) {

  code {
    font-family: courier;
    line-height: 0.0px !important;
    letter-spacing: 0.8px;
    font-size: 16px;
}
}
 

// Animation first title on every page //
.Index-page:first-child .sqs-layout, .Intro .sqs-row {
  -webkit-animation: fade-text-anim 1.5s ease-in-out;
  animation: fade-text-anim 1.5s ease-in-out;
}

@keyframes fade-text-anim {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,30px,0);
    -moz-transform: translate3d(0,30px,0);
    -ms-transform: translate3d(0,30px,0);
    -o-transform: translate3d(0,30px,0);
    transform: translate3d(0,30px,0);
  }
  25% {
    opacity: 0;
    -webkit-transform: translate3d(0,30px,0);
    -moz-transform: translate3d(0,30px,0);
    -ms-transform: translate3d(0,30px,0);
    -o-transform: translate3d(0,30px,0);
    transform: translate3d(0,30px,0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}

 

// Text Highlight Selection Color //

::selection {
  background: #6661FF;
  color: #FFFFFF;
}
::-moz-selection {
  background: #772bf5;
  color: #FFFFFF;
}
//


// Mobile Menu Button //

@media screen and (max-width: 767px) {
.header--menu-open .header-menu .header-menu-cta a {
  font-size: 30px;
}
}

//* Hover underline main navigation */
.Header-nav-item:hover {
   border-bottom: 1px solid #6661FF;
}
//
    

// No hyphenation //

 p, h1, h2, h3 {
     -webkit-hyphens: manual !important;
        -moz-hyphens: manual !important;
         -ms-hyphens: manual !important;
             hyphens: manual !important;
   }


  
// Show home page block dependent on screen size // 
@media only screen and (max-width: 780px) { #home-banner { display: none; }}
@media only screen and (min-width: 781px) { #home-banner-mobile { display: none; }}
 

The problem seems to be that the background image won't extend high enough.  This additional CSS might help:

body.tweak-site-width-option-full-background.tweak-footer-show:not(.tweak-site-border-show) {
    background-color: #5101ff;
}

I applied all your code, but I'm afraid I still have the same problem...

Thanks for this and helping out. Do you have any other suggestions or reasons why this could be happening?

Best,

Sander

Hi Zygmunt,

I am a freelancer and clients are looking at my website. So it is quite frustrating that Squarespace is showing this bug. I've tried so many things. 

I screen recorded my screen to show you the top bar that I want to get rid off, and also if I play around with the site styles what happens to it. Perhaps it tells you what the problem is.

I hope that you can help me to get rid of this. Hope to hear from you.

Best,
Sander

To help you any further I would need access to your website. Given the age of template you are using, I no longer have a testing setup for it.