We create a number of custom menu hover effects for many of our clients and child themes so I decided it is time to get some of those tutorials into your hands.
This first one is inspired by our very own Jerry Simmons. On a recent project he came up with this nifty Divi Menu Double Outline Reveal when you hover over the menu items.
In this tutorial I am going to show you how you can make the outline slowly reveal itself from two corners of each menu item.
*Note: This customization will not work correctly if you have drop down sub-menus.
Let’s Get Started Making The Double Outline Reveal
Adding The Custom CSS
If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>Custom CSS (which is located at the bottom of the first tab in Theme Options)
Add this CSS.
/*------------------------------------------------*/
/*----------[GQ - MENU OUTLINE REVEAL]------------*/
/*------------------------------------------------*/
@media only screen and (min-width : 981px) {
#main-header li a {
margin-right: 10px;
padding-bottom: 0px!important;
margin-bottom: 33px;}
#main-header li a::before, #main-header li a::after {
content: '';
position: absolute;
width: calc(100% + 20px);
height: calc(100% + 20px);
z-index: -1;
border: 2px solid transparent;
-webkit-transform: scale(0);
-webkit-transform-origin: 0 100%;
transition: 0.45s; }
#main-header li a::before {
margin-left: -12px;
margin-top: -12px; }
#main-header li a::after {
right: -12px;
margin-top: -12px; }
#main-header li a::before {
border-bottom: 2px solid #079f66;
border-left: 2px solid #079f66;
-webkit-transform-origin: 0 100%; }
#main-header li a::after {
border-top: 2px solid #079f66;
border-right: 2px solid #079f66;
-webkit-transform-origin: 100% 0%; }
#main-header li a:hover::before, #main-header li a:hover::after {
-webkit-transform: scale(1); }}
Making Adjustments
Now because there are already so many menu padding options available in the Theme Customizer, there is a good chance you may have to adjust the bottom and right padding and margins of the main buttons. You can change that here.
The following rules change the padding of the outline so that you can make it bigger or smaller
The following rules change the border thickness and color for the outlines.
And that’s it.
If you used this on one of your projects, please share a link below so we can see how you used it.
Have fun!
Well, that’s all for now. I hope you find this article useful.
Very nice Geno, and thank you. Works like a charm: https://projetoluzazul.com.br
Nice work Frans. It compliments your lovely site very nicely 🙂
thanks geno Please how can i applicate this into a title or text blurb
I have that planned for a future tutorials. Stay tuned 🙂
hi i its creating conflict with menu item with submenu
i am building it locally
\https://postimg.org/image/lof3qr1ez/
*Note: This customization will not work correctly if you have drop down sub-menus.
Hi Geno, These menu customization’s are amazing! I just used one on my latest project! Question, have you ever done a tutorial on how to insert a graphic behind the menu in the navigation header? If you have, can you please send me a link to it? If not, that would be a great tutorial to do as I’ve seen a lot of people request this on the ET site, and I can’t find any info, on how to do it. Thanks again for all your hard work!!
Thanks Tony. I have seen that request come up often as well. It is pretty easy to set a background image for the header but the hard part is getting it to fit nicely in all screen sizes. Here is the css.
#main-header::after { content: ""; background-image: url('myimage.png'); background-size:cover; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }Just replace ‘myimage.png’ with the URL of your desired background image.
Hi Geno, thanks for the amazing custom CSS who have been providing.
I had a strange problem using this this CSS, which made both primary and secondary Menus, Slider Revolution Slider and Gravity Form’s form invisible or disappeared.
When I removed the code, Menus are back but still Slider Revolution and Gravity Form are invisible.
Can you suggest what is wrong?
Hi Manish. I am not sure what the problem could be. None of the css relates to Slider Revolution or Gravity forms. But those two plugins could have an impact on the menu depending on where and what you are using them for. That would explain why the menu was not working correctly when you added it. But the css itself would not make the other two things disappear unless there was a syntax not copied over correctly or accidently removed from your existing css
Hello Geno! I love your website and all of the amazing tutorials you post. How do you add the outline effect to an active/current link?
Thank you. I am sorry I have not gotten to this request yet. Others have asked as well. Just been to busy to work on that one.
Hello
I want to add this effect to a image. how can i do this.
It is similar but it would take a few extra steps that probably need it’s own tutorial.
i am trying it to apply it on an image. but not able to do so.
This CSS is specific to menu links only. I started experimenting with using borders on images and you can see them here: https://quiroz.co/category/images/
Hello Geno,
first of all thank you for your work, it brings a grnade help to the community and is exceptional.
I adapted the code on one of my site is the rendering is great, I would like to know how can we keep the effect on an active link
I will have to play around with that one.
Thank you for your answer, I can not wait to see this feature
Your tutorials are amazing sir. I’m so glad i found your site. Please can you make a tutorial on how to design the kind of header you have on here?
Another nice tutorial. Thank you. Tried this on a site it came out well. But got funny when it got to a CTA button i had on my header.