How To Create A Menu Underline Hover Effect With Divi 4

Divi 4 How To Create A Menu Underline Hover Effect. 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!

I like to use the fantastic Chrome inspector tools to test out my CSS code in real time. To do this go back to the Chrome browser, right click on the element you wish to work on, in this case it’s the menu link items. Right click and choose inspect from the drop-down menu. This will bring up the Chrome inspector, and from here we will be able to see all HTML and CSS code. We can also write and update our site CSS in real time.

Now I have the appropriate element selected, I am first going to give it a background color and some padding. If you just want to use the code that we used in our how to create a menu underline hover effect with Divi 4 video, just copy and paste this code:

Once the code is written in inspector tools, and you are happy with the effect that you have, we need to go back and actually write it into the theme itself. Writing in the browser itself will show us the changes in real time, but unless the code is copied to all theme custom CSS, then, once we were fresh the changes will disappear. So, let’s go back to all custom CSS entry box. We will give it a title, this makes it easier to find when you have a lot of custom CSS. To give it a title you simply have to type/**/ and then put the title in between the two stars. This way it will be commented out I’m not be read by the browser. Under the title simply paste in the CSS code that you have copied from the Chrome inspector. Hit the save button and wait until you get the green check mark. The only other thing left to do is to create the actual hover effect. To do this we need duplicate CSS we have just copied and add:hover after the a tag. We should have two sets of entries now one for the regular state and one for the hover state.

That’s it, the menu should never be decorated. There you have it that is how to create a menu underline hover effect with Divi 4.