// 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)');
}
});
Divi does use the flex property for contact module Submit button (as you can see in the image below) you can center align the button very easily. We need to remove the float and horizontally center the button. Flex uses the justify-content property to align the flex items at the center of the container. or…
Add a Standard Section and insert a fullwidth column. Click to edit the Section Settings and, under General Settings, change the following: Under Custom CSS add the following: CSS Class: tr_two_col Save & Exit Implementing the Two-Column Grid Layout By default, the blog grid has a three-columnn grid layout. To change this to a two-column…
![Use Different Logo on a Fixed Header in Divi Theme [Fixed Firefox issue]](https://blog.tawfiq.me/wp-content/uploads/2017/11/Use-Different-Logo-on-a-Fixed-Header-in-Divi-Theme-768x292.png){kind=logo}
Make two versions of your logo that are both 200×131 and add them to your WordPress Media library. One logo will be used for the main header and one will be used for your fixed header. Insert CSS Snippet to Switch Logo on Fixed Header One of the simplest ways to switch your logo image…
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…
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…
You can take a full page screen shot of any live website using Firefox build-in Web Development Tool. No need to install add-on or third party apps. If past and works well. Go to Tools > Web Developer > Developer Toolbar, then type screenshot –fullpage That’s it.
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.