+91 8105841156 harshith.webdev@gmail.com
Select Page

# A good design improves user experience and converts well!

Custom CSS hover effects for divi menu:

As we all know its difficult to customize the header and navigation of divi because its not a module and elegant themes hasn’t released any updated styling for them, so in this post i am going to show you how to add 4 simple yet beautiful hover effects to your divi menu bar. 

This is one of the first customization I am going to show you, there will be lots more amazing designs and techniques you can apply to divi so stay tuned.

Now lets take a look at the design one by one.

 

1. Inverted vertical growing lines

     This a good hover effect, looks cool and highlights the menu item very well, you can change the color of both inverted lines and make them fit your website’s color scheme. This is the very same effect that i have applied to this website’s menu.

 Applying the code to your website:

     Copy the code below and go to your divi theme options in the dashboard,  then paste the code in the  additional CSS area at the bottom of the theme options,
hit save changes and refresh your website, you will be able to see the changes now. 
Change the colors and thickness of the lines in the code below where its written in comments. 

Note: you might have different results based on what settings you have on your navigation menu, no need to worry, all you need to do is adjust the height and length of the lines to fit your menu items and you are good to go. 

2. Left and right Highlighted corners 

    This effects is new and unique, the lines compliment each other and gives a sharp feeling to the menu item, same as the above you can change the thickness and length of the lines.

 Applying the code to your website:

     Copy the code below and go to your divi theme options in the dashboard,  then paste the code in the  additional CSS area at the bottom of the theme options,
hit save changes and refresh your website you will be able to see the changes now. 
Change the colors and thickness of the lines in the code below where its written in comments. 

Note: you might have different results based on what setting you have on your navigation menu, no need to worry all you need to do is adjust the height and length of the lines to fit your menu items and you are good to go. 

3. Left and right vertical lines

     A subtle yet clean looking effect to your menu item, the next one will be another version of this one so keep reading.

 Applying the code to your website:

     Copy the code below and go to your divi theme options in the dashboard,  then paste the code in the  additional CSS area at the bottom of the theme options,
hit save changes and refresh your website you will be able to see the changes now. 
Change the colors and thickness of the lines in the code below where its written in comments. 

Note: you might have different results based on what setting you have on your navigation menu, no need to worry all you need to do is adjust the height and length of the lines to fit your menu items and you are good to go. 

4. Top and bottom horizontal lines 

     This might look underwhelming but trust me it isn’t, if you give the lines a brighter color and change the background as well , it will make a fantastic effect for your menu. 
     If you watched my youtube video you will see how good this effect is and is certainly one of the best. 

 Applying the code to your website:

     Copy the code below and go to your divi theme options in the dashboard,  then paste the code in the  additional CSS area at the bottom of the theme options,
hit save changes and refresh your website you will be able to see the changes now. 
Change the colors and thickness of the lines in the code below where its written in comments. 

Note: you might have different results based on what setting you have on your navigation menu, no need to worry all you need to do is adjust the height and length of the lines to fit your menu items and you are good to go. 

Final thoughts

     Ultimately all of these are for improving your website’s user experience and validate your business and let them believe you are hardworking, and pay attention to detail in everything you do.

    I have a lot more hover effects for menus and other things on your website, but they are a lot more complicated and require  good coding knowledge, but the results are even better. Look forward to my upcoming videos and posts for them.   

Connect with ME!

 Want an awesome-looking 
 professional website ?

HIRE ME  and I will build a responsive , SEO  friendly website with an amazing design.

 

 

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Social Share Buttons and Icons powered by Ultimatelysocial