// navbar background color change on scroll
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if(scroll < 300){
$('.fixed-top').css('background', 'transparent');
} else{
$('.fixed-top').css('background', 'rgba(23, 162, 184, 0.9)');
}
});
I'm a freelance WordPress Developer and Project Manager. Specialize in WordPress, Woocommerce, Custom WordPress Theme and Plugin Development, and Shopify. Highly skilled in HTML5, CSS3, SCSS, JavaScript, jQuery, Ajax, ES6, Bootstrap, PHP and MySQL.
By Default Syntaxhighlighter Evolved plugin came with no top and bottom padding and very tight line height. If you are someone like me who love some breathing space in between every section in a WordPress post then you can try the below CSS code snippet. Screenshots are attached before and after applying the CSS code….
I’m using a Themeforest Premium theme and installed and activated a child theme in order to make various CSS style changes to my website. However, the changes I’ve made to the child theme stylesheet are not working on the website, it’s taking styles from parent theme style.css file. functions.php file has the folowing code, The…
It’s simple. Set your image crop dimensions and use this line in your CSS: img { object-fit: cover; } That’s it. No need for unsemantic, wrapping divs or any other nonsense. This technique works great for cropping awkwardly-sized pictures down to squares or circles. Take this wide photo below for example. Once object-fit: cover is applied to the…
Problem: When we enable Smush Pro CDN we see the wrong image size in desktop view. The browser shows image size (1024 * 768) (can see by right click save as to see the file name). The container is 1400 px wide so it should take a higher image size and use that instead. If…
Creating a secure shopping experience on your WooCommerce store can be as simple as ensuring only registered users can view your products and shop. This guide will show you, in easy steps, how to direct anyone who isn’t logged in to the login page. Using a Simple WordPress Code To make your store private, you’ll…
Need to add a Divi Login form module in your footer widget area? By default there is no option to add Divi Login Module to Footer widget area. We can do this my copy paste the Login form generated code into Widget text area.
Your solution is not complete. If i scroll the page down and i refresh the page, the navbar will appear only after i scroll the page, and not after refresh.
Thank you for your comment. It was very helpful to me.
is there a solution to ZSHARE’s question?
Can I change without any custom code mean only by bootstrap or jquery.
Hello Max, this custom code is written in jQuery.
Did I have to call this jQuery function in my navbar with Onclick
Hello Hanniel,
You can write this code in your child theme footer.php file, custom js file in your theme.