Jump to content

Add solid background on sticky nav in Brine

Recommended Posts

Site URL: https://magnolia-mandolin-k3fs.squarespace.com/

Hi, I'm trying to add a solid background to my nav bar as the user scrolls (but stays transparent at the top of the page), I copied some code that worked on another site I worked on a long time ago, but it's not working this time, although it displays solid white on some pages without a banner ). If anyone can help that would be great! I'm also not sure how to display alternate logos on mobile, they work on desktop (Contact Page etc.), but on mobile it defaults to the primary logo on every page. Thanks!

 

p/w: TJC2022

Link to comment
  • Replies 3
  • Views 175
  • Created
  • Last Reply

Top Posters In This Topic

#1. Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(function(){
 var visibleTop = 50;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('header.Header').addClass('tp-sticky');
        }
        else {
            $('header.Header').removeClass('tp-sticky');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  header.Header.Header--bottom.Header--overlay.tp-sticky {
    background-color: red;
    padding-bottom: 20px;
}
</style>

#2. Which code did you use?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Perfect, thanks so much! I was just using this in the CSS: 

/* fixed header */
.Header {
  position: fixed!important;
  z-index: 1000;
  width: 100%;
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

.Header.Header--bottom {
  position: fixed;
  top: 0px;
  z-index:9999;
  background-color: #000000, 0.0 ;
}

.Header-inner {
  padding-top: 30px;
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

.Header.scrollNav {
  padding-bottom: 10px;
  background: #000000!important 1.0 ;


  .Header-inner {
    padding-top: 10px!important;
    background: #000000!important 1.0 ;
  }
   


  }

Link to comment
On 4/11/2022 at 8:19 AM, hostyle01 said:

Perfect, thanks so much! I was just using this in the CSS: 

/* fixed header */
.Header {
  position: fixed!important;
  z-index: 1000;
  width: 100%;
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

.Header.Header--bottom {
  position: fixed;
  top: 0px;
  z-index:9999;
  background-color: #000000, 0.0 ;
}

.Header-inner {
  padding-top: 30px;
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

.Header.scrollNav {
  padding-bottom: 10px;
  background: #000000!important 1.0 ;


  .Header-inner {
    padding-top: 10px!important;
    background: #000000!important 1.0 ;
  }
   


  }

Did you solve or still need help?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.