Transparent Nav Bar

Support
#1

Hi,

I have used this code many times before and it has worked perfectly, however, this time it’s not working and I can’t seem to figure out why. I am trying to make my nav bar transparent, and then on scroll have a solid color just like this site: www.wildroseorganizing.com

The CSS I am using now (that isn’t working) is:

/* Home - header transparent for fullscreen bg image */
.home.x-navbar-fixed-top-active .masthead {
position: absolute;
top: 0;
width: 100%;
}

.x-navbar-fixed-top-active .x-navbar {
background-color: transparent;
border-bottom:none;
}

.x-logobar {
background-color:transparent;
}

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

body .x-navbar.x-navbar-fixed-top {
background-color: #eeeee9 !important;
-webkit-box-shadow: 0px 2px 5px 0px rgba(153,153,153,1);
-moz-box-shadow: 0px 2px 5px 0px rgba(153,153,153,1);
box-shadow: 0px 2px 5px 0px rgba(153,153,153,1);
}

The website is: http://184.154.245.235/~whitewo7/

Thank you!

Dana

#2

Hi Dana,

Please update this code:

.x-navbar-fixed-top-active .x-navbar {
    background-color: transparent;
    border-bottom: none;
}

to

.x-navbar-fixed-top-active .x-navbar {
    background-color: transparent !important;
    border-bottom: none;
}

Then add this code in the custom JS:

(function($){
	$(window).scroll(function(event) {
		if( $(this).scrollTop() == 0 ){
			$(".x-navbar").removeClass('x-navbar-fixed-top');
		} else {
			$(".x-navbar").addClass('x-navbar-fixed-top');
		}
	});
})(jQuery);

Hope this helps.

#3

Thank you. This sort of works.

The nav bar is transparent at first, but then once you scroll back to the top it remains white and doesn’t go back to being transparent. I would like it to go back to being transparent when at the top of the page (just like Wild Rose Organizing)

Thank you

#4

Hi,

You can try this code instead.

jQuery(function($) {
  $(window).scroll(function () {  
       if( $(this).scrollTop() == 0 ){
			$(".x-navbar").removeClass('x-navbar-fixed-top');
		} else {
			$(".x-navbar").addClass('x-navbar-fixed-top');
		}
  });
});

Hope that helps.

#5

Great! Thanks!

#6

You’re welcome.

#7

Hello,

As this question relates to the above, I figured it would be best to keep it in the same question.

In the mobile view, when scrolling, the background is white, however, I would like it only to be white upon scroll for screens and to be transparent for mobile.

The site can be found here.

I would like the mobile view to look similar to this website.

As I’m not familiar with jQuery, I’m not sure how to implement media queries for it.

Thank you!

#8

Hi again,

Try adding the following code in your Customizer as wll:

@media screen and (max-width: 979px) {
    html body .x-navbar.x-navbar-fixed-top {
        background-color: transparent !important;
    }
}

Let us know how this goes!

#9

You’re great! Thank you!

1 Like
#10

Glad we could help.

Cheers!