[ATCompressorsParticipant]

Good morning,

I was wondering if you’d mind providing the CSS and possibly JavaScript that I need to overlap a transparent navbar over a slider and then change to a solid colour when scrolling down.
I’ve tried a few bits of code that I’ve found throughout the forums, but they all seem to leave a black bar at the top; as if the navbar hasn’t fully changed to transparent.

Thank you,

[JoaoModerator]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[ATCompressorsParticipant]

This is the URL for the home page: http://aandtcompressors.com/home

[JoaoModerator]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

.x-navbar {
    border: none;
    box-shadow: none;     background-color: transparent; 
}
.x-navbar .desktop .x-nav > li > a, 
.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    -moz-box-shadow:   none;
    -webkit-box-shadow: none;
    box-shadow:         none;
       color:whitek;
}
.x-navbar-scrolled .desktop .x-nav > li > a > span {
    color: #272727;
}

.x-navbar-scrolled .desktop .x-nav > li > a > span:hover {
    color: red;
}
.x-navbar-fixed-top-active .x-navbar-wrap {
  margin-bottom: 0;
}
@media (min-width: 980px) {
	.x-slider-container.below {
		margin-top: -75px;
	} 
}

And add the following code to Appereance > Customizer > Custom > JS

jQuery(document).ready(function($){
  $('.home .x-navbar-fixed-top').css("background-color", "transparent");
  $(window).scroll(function(){
   if ($(this).scrollTop() > 400) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(0,0,0,0.99)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 300) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(0,0,0,0,0.75)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 200) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(0,0,0,0,0.5)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 100) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(0,0,0,0,0.35)").css("transition","0.3s ease-in-out ");
   } else {
    $('.home .x-navbar-fixed-top').css("background-color", "transparent").css("transition","0.3s ease-in-out ");
   }
    
   if ($(this).scrollTop() > 100) {
     $('.home .x-navbar-fixed-top').addClass('x-navbar-scrolled');
   } else {
     $('.home .x-navbar-fixed-top').removeClass('x-navbar-scrolled');
   }
    
  });
});

Hope that helps

joao

[ATCompressorsParticipant]

URL: http://aandtcompressors.com/home

Thank you for your last message; it mostly did the trick.

Can you see the gap between the top of the page and the slider? How do I budge the slider up to remove that gap?

I notice now that I wasn’t particularly clear in my first message; when the page scrolls down, I’d like the static menu to change to solid black.

Thank you for all of your help so far, Joao. 🙂

[Paul RModerator]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

body.x-navbar-fixed-top-active.page-id-11 .x-navbar-wrap {
    position: absolute;
    width: 100%;
}

.x-navbar.x-navbar-fixed-top {
    background-color:#000;
}

Then add this in Custom > Edit Global Javascript.

jQuery(function($) {
$(window).scroll(function(){
        var y = $(window).scrollTop();
        if (y <= 0){
           $('.x-navbar').removeClass('x-navbar-fixed-top');
        }
    });
});

Hope that helps.

[ATCompressorsParticipant]

Hi Paul,

Thanks for you so much for your help. 🙂

I did play around with the CSS and JS that you provided to get the final result that I was after; if it’s alright, I’m going to leave the code I used below in case anyone else comes across this thread and would like to recreate a similar thing. 🙂

CSS

.x-navbar {
    border: none;
    box-shadow: none;
    background-color: transparent; 
}
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    color:white;
}

.x-navbar-scrolled .desktop .x-nav > li > a > span:hover {
    color: red;
}
.x-navbar-fixed-top-active .x-navbar-wrap {
  margin-bottom: 0;
}

.x-navbar-fixed-top-active.page-id-11 .x-navbar-wrap {
    position: absolute;
    width: 100%;
}

@media (min-width: 980px) {
	.x-slider-container.below {
		margin-top: -75px;
	} 
}

JavaScript

jQuery(document).ready(function($){
  $('.x-navbar-fixed-top').css("background-color", "transparent");
  $(window).scroll(function(){
   if ($(this).scrollTop() > 150) {
    $('.x-navbar-fixed-top').css("background-color", "rgba(0, 0, 0,0.75)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 90) {
    $('.x-navbar-fixed-top').css("background-color", "rgba(0, 0, 0,0.5)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 40) {
    $('.x-navbar-fixed-top').css("background-color", "rgba(0, 0, 0,0.35)").css("transition","0.3s ease-in-out ");
   } else {
    $('.x-navbar-fixed-top').css("background-color", "transparent").css("transition","0.3s ease-in-out ");
   }
  });
});

[RahulModerator]

Glad to hear it and thanks for the input. Appreciated!

Let us know if we can help with anything else.

Thanks!

[Author]

Posts