Brine: Nav to change color after scrolling past Hero

On 9/3/2022 at 5:27 AM, tuanphan said:

Try this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>  
 $(window).on("scroll", function() {
    if($(window).scrollTop() > 400) {
        $(".Mobile-bar.Mobile-bar--top").addClass("on-scroll");
    } else {
       $(".Mobile-bar.Mobile-bar--top").removeClass("on-scroll");
    }
});
</script>
<style>
  .Mobile-bar {
  background-color: blue!important;
  position: fixed!important;
  transition: 0.2s all linear;
  -webkit-transition:background-color .4s;
  -moz-transition:background-color .4s;
  transition:background-color .4s;
}

.on-scroll{
  background-color: red!important;
}
.Site-inner{padding-top: 50px;}
</style>

 

this is excellent and worked perfectly. However, do you know an adjustment to start it transparent then after the scroll add the color?

Thanks @tuanphan this was really helpful, we managed to figure out the transparency issue and it looks great! 

We have another one maybe you all can help with (same site)

I am having an issue with my navbar. I forced the desktop navbar to be a mobile hamburger menu rather than the traditional desktop navbar. That change caused an issue of the whole 50% of my right screen to open the nav bar whenever you click anywhere on the right side. Is there some sort of coding that can fix this? It is only happening on the desktop view, not tablet or mobile. 

On 9/8/2022 at 3:24 AM, Leland_Creative said:

Thanks @tuanphan this was really helpful, we managed to figure out the transparency issue and it looks great! 

We have another one maybe you all can help with (same site)

I am having an issue with my navbar. I forced the desktop navbar to be a mobile hamburger menu rather than the traditional desktop navbar. That change caused an issue of the whole 50% of my right screen to open the nav bar whenever you click anywhere on the right side. Is there some sort of coding that can fix this? It is only happening on the desktop view, not tablet or mobile. 

Which code you used to force burger menu appear on desktop?

6 hours ago, tuanphan said:

Which code you used to force burger menu appear on desktop?

I didn't use code. I increased the breakpoint of the mobile menu to 100%. I did add code so it wouldn't expand all the way across, see below.

@media screen and (min-width:901px) {
.Mobile-overlay {
    width: 20%;
    right: 0;
    left: unset !important;
}
}

Just curious what did your finished Header and CSS code look like?  There are a lot of comments in this post and I still can't get it to work on Brine past the hero image and ON TOP of the texts.  Also my Menu becomes unclickable so had to deactivate the code. TIA

IMPLEMENTED

#1 CODE INJECTION HEADER

Header

<!-- // Sticky Nav Menu // --> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>  

 $(window).on("scroll", function() {

    if($(window).scrollTop() > 400) {

        $(".Header").addClass("on-scroll");

    } else {

       $(".Header").removeClass("on-scroll");

    }

});

</script>

#2 DESIGN CSS 

/*Sticky Menu Code*/ 

.Header{

  background-color: white!important;

  position: fixed!important;

  transition: 0.2s all linear;

  -webkit-transition:background-color .4s;

  -moz-transition:background-color .4s;

  transition:background-color .4s;

}

.on-scroll{

  background-color: white!important;

}

.Site-inner{padding-top: 50px;}

On 9/14/2022 at 9:00 AM, jac.cunningham said:

Just curious what did your finished Header and CSS code look like?  There are a lot of comments in this post and I still can't get it to work on Brine past the hero image and ON TOP of the texts.  Also my Menu becomes unclickable so had to deactivate the code. TIA

IMPLEMENTED

#1 CODE INJECTION HEADER

Header

<!-- // Sticky Nav Menu // --> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>  

 $(window).on("scroll", function() {

    if($(window).scrollTop() > 400) {

        $(".Header").addClass("on-scroll");

    } else {

       $(".Header").removeClass("on-scroll");

    }

});

</script>

#2 DESIGN CSS 

/*Sticky Menu Code*/ 

.Header{

  background-color: white!important;

  position: fixed!important;

  transition: 0.2s all linear;

  -webkit-transition:background-color .4s;

  -moz-transition:background-color .4s;

  transition:background-color .4s;

}

.on-scroll{

  background-color: white!important;

}

.Site-inner{padding-top: 50px;}

 

 

Can you share link to the site?

19 hours ago, tuanphan said:

Can you share link to the site?

It's my working site so I had to turn off the Design > Custom CSS code.
www.jacCunningham.com.
Goal is for a sticky menu to work on Brine, with Homepage using Index. The code above de-activates the links in my menu to no longer be clickable so I can't leave the code active. I've left the first bit in the HEADER. 🙂

On 9/18/2022 at 11:11 AM, jac.cunningham said:

It's my working site so I had to turn off the Design > Custom CSS code.
www.jacCunningham.com.
Goal is for a sticky menu to work on Brine, with Homepage using Index. The code above de-activates the links in my menu to no longer be clickable so I can't leave the code active. I've left the first bit in the HEADER. 🙂

Use this code

header.Header.Header--top {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 9999;
}

Works a charm - thank you so much taunphan.