Transparent Navbar (header)

[antonioprado]

@Richard-Keith hello! Thank you for your answer! :) Yes, it works, but I want that the navbar be transparent only on the top of the page. This example https://www.byfamilia.com/cinema-jueu-2020/ you can see what I mean. When you are on the top of the page the navbar is transparent but when you scroll down it becomes white. Is it possible? :D

Thank you again!!

[Richard]

Dear @antonioprado

You need to look into adding "JQuery" so that based on where you are down the page, the Navbar will be either transparent or white

https://stackoverflow.com/questions/23706003/changing-nav-bar-color-after-scrolling

This will require some basic JS/ jQuery knowledge and you may need some help from a kind developer if it is too difficult for you,

Remember when inserting jQuery Code that the common " $ " sign needs to be changed for " jQuery ".

https://laytheme.com/documentation.html#custom-javascript

Also have a look into if others on the forum have found similar solutions in the past:

http://laythemeforum.com/search?term=change on scroll&in=posts&matchWords=all&sortBy=relevance&sortDirection=desc&showAs=posts

Im Sorry that right now i am unable to go further with you, but best of luck, there is a lot of content on the internet about this question so dont give up! :)

Best Wishes
Richard

[antonioprado]

@Richard-Keith Hello! Thank you very much for your time and the references you showed me! Finally I managed to achieve what I was looking for! Here's the code I use if someone is interested on the same thing.

On custom <head> content:

<script>
    jQuery(document).ready(function(){
      jQuery(window).scroll(function() { // check if scroll event happened
        if (jQuery(document).scrollTop() > 25) { // check if user scrolled more than 50 from top of the browser window
          jQuery(".navbar").css("background-color", "#ffffff"); // if yes, then change the color of class "navbar" to white (#ffffff)
        } else {
          jQuery(".navbar").css("background-color", "transparent"); // if not, change it back to transparent
        }
      });
    });
</script>

On custom CSS:

.navbar {
transition: background-color 200ms linear;
}

Also on the "Customize" section the navbar must be on opacity 0.

That's all! Thank you again for your help and have a good day! :D

[Richard]

Dear @antonioprado

Amazing! thank you heaps for posting your success and helping to make the Lay Theme Community stronger,
So cool that you made it work :_)

Have a wonderful rest of the week

Best
Richard

[ERSI19]

@antonioprado said in Transparent Navbar (header):

.navbar {
transition: background-color 200ms linear;
}

Thank you very much, where do I have to place this? custom <head> content.?

[alasdair17]

@ERSI19 hey, you need to paste it into the 'Custom CSS' box.

[LouisS]

Hi,
Thanks for the script. Works great! Anybody knows how I can add a blur instead of just having the menu bar just white? I found this backdrop filter, but don't really know how to implement it. Help is much appreciated!

-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);

Best,Louis

[LouisS]

Now I figured it out. DOnt know why it didnt work in the beginning. Added the blur filter and some transperancy with the rgba.

<script>
    jQuery(document).ready(function(){
      jQuery(window).scroll(function() { // check if scroll event happened
        if (jQuery(document).scrollTop() > 50) { // check if user scrolled more than 50 from top of the browser window
            jQuery(".navbar").css("background-color", "rgba(255, 255, 255, 0.4)"); // if yes, then change the color of class "navbar" to white (#ffffff) and 0.4 opacity
         // jQuery(".navbar").css("background-color", "#ffffff"); // if yes, then change the color of class "navbar" to white (#ffffff)
            jQuery(".navbar").css("backdrop-filter", "blur(5px)"); // if yes, then change the blur to 5px
        } else {
            jQuery(".navbar").css("background-color", "transparent"); // if not, change it back to transparent
            jQuery(".navbar").css("backdrop-filter", "blur(0px)"); // if yes, then change the blur to 0px

        }
      });
    });
</script>

[arminunruh]

nice!

you can also do it like this:

jQuery(window).scroll(function() { // check if scroll event happened
        if (window.scrollY > 50) { // check if user scrolled more than 50 from top of the browser window
            jQuery(".navbar").css("background-color", "rgba(255, 255, 255, 0.4)"); // if yes, then change the color of class "navbar" to white (#ffffff) and 0.4 opacity
         // jQuery(".navbar").css("background-color", "#ffffff"); // if yes, then change the color of class "navbar" to white (#ffffff)
            jQuery(".navbar").css("backdrop-filter", "blur(5px)"); // if yes, then change the blur to 5px
        } else {
            jQuery(".navbar").css("background-color", "transparent"); // if not, change it back to transparent
            jQuery(".navbar").css("backdrop-filter", "blur(0px)"); // if yes, then change the blur to 0px

        }
      });

u dont need a ready handler for this and you can use window.scrollY

[LouisS]

@arminunruh Thanks! I am very new to this and just copy paste pieces together :)
How can I exclude the mobile menu bar from my script? I want it to become 100% opacity instead of 0%. How do I just target the desktop menu bar without the mobile menu bar? I am having the script in Custom head content right now.
Best,
Louis

[arminunruh]

jQuery(window).scroll(function() { // check if scroll event happened
if( window.innerWidth > 700 ) {

        if (window.scrollY > 50) { // check if user scrolled more than 50 from top of the browser window
            jQuery(".navbar").css("background-color", "rgba(255, 255, 255, 0.4)"); // if yes, then change the color of class "navbar" to white (#ffffff) and 0.4 opacity
         // jQuery(".navbar").css("background-color", "#ffffff"); // if yes, then change the color of class "navbar" to white (#ffffff)
            jQuery(".navbar").css("backdrop-filter", "blur(5px)"); // if yes, then change the blur to 5px
        } else {
            jQuery(".navbar").css("background-color", "rgba(255, 255, 255, 1);
            jQuery(".navbar").css("backdrop-filter", "blur(0px)"); // if yes, then change the blur to 0px
}
        }
      });