How to make a navbar gradient background with the Divi 4 theme. The Divi theme from elegant themes is absolutely awesome. Whenever I have a WordPress build, it’s my go-to theme every time. I have built many, many sites with the Divi theme and it just keeps on getting better. Elegant themes keeps adding features, and tools to increase your productivity, as well as ease of use and site load speed. So if you are building a WordPress site I recommend you give it a try. You will not be disappointed!
In this video we are going to show you how to make a navbar gradient background with the Divi 4 theme. By default, the Divi 4 theme will let you add colors and change the opacity of your navbar background, but there is no actual way built-in to add a gradient background. This can be done very easily with a bit of simple custom CSS code.
If you need to create an easy gradient, you can do it very easily by going to cssgradient.io – once you have created you a gradient, simply copy the CSS that is output beneath the gradient. Now let’s return to our website, I am using the Google Chrome browser but has the great inspector tools. Right click on the element you wish to inspect, in this case it’s the navbar. Once the inspector opens, make sure you have the elements tab open to show HTML, and the Styles tab open to show CSS. Under the Stiles tab paste in the code but we copied from cssgradient.io below the #main-header title. When you have done this, you should now see your gradient appear behind your navbar. We could have pasted this code straight into the custom CSS box for the site, but I always like to try it out first with the chrome inspector in case I want to change it or tweak it a little bit.
When you are happy with the look of your gradient, we need to copy the code and make it permanent by pasting it into the custom CSS box for this theme. To do this we need to go to the dashboard, down to Divi, then to theme options, under the general tab at the bottom of the page you will find the custom CSS box. Paste your copied code into this box, then hit the save button to make the changes permanent. We can now go back to the site and refresh the browser and our changes for the gradient background should remain in place. There you have it that is how to make a gradient background with the Divi 4 theme.
For our readers, get any of the below courses for just $9.99 each. Just contact me with the course name and I’ll email you the discount coupon.
