Jump to content

Remove top header

Recommended Posts

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

Link to comment
  • Replies 10
  • Views 281
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Can you share your website URL? Thanks!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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


image.thumb.png.46b55f407f38df16263254de0a72367a.png

Link to comment

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?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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; } 
  }
  }

Link to comment

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;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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

Link to comment

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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.