HomeЛюди и блогиRelated VideosMore From: Elegant Themes

3 Beautiful CSS Hover Effects You Can Add to Your Divi Menus

289 ratings | 26218 views
Your menu is one of the first things visitors see when they go to your website, so you want it to have some style right? Of course, you do! That’s why in today’s post I’m going to share three ways to add some nice hover effects to your menu with custom CSS. Read article: https://goo.gl/wOHk4q
Html code for embedding videos on your blog
Text Comments (43)
does it works in phone view as well?
Aman Dewan (8 months ago)
From where can I get the codes that you have used?
Danielle Tremblay (10 months ago)
Thank you! I did the first one and it worked great!
Fawad Ali (10 months ago)
Can any tell me from where he copied the CSS code ?? Thanks In Advance.
Luke Sniewski (4 months ago)
The article in the description of the video.
Titan (1 year ago)
Hi! I want to hover just the text on my menu in different color. The background i want it the same. Can someone help me with that? Thank you!
Christopher Winkler (1 year ago)
Great tutorial. Is it also possible to make menu effects like here: https://ufcgym.com with Divi? They have images and lists in their menu. Could you make a tutorial on this?
Daniel Grayling (1 year ago)
Hopefully a simple CSS fix: I'm using the vertical in-line header style with logo and styling with the first CSS Hover Effect. However, I want to remove the logo from the line strike through. Does anyone know how to exclude the logo from the effect?
I'm sorry it didn't work as you wanted... I don't need thanks, but thank you for the offer!
Daniel Grayling (1 year ago)
Hey @designbyatlantis, sorry to just now be getting back to you! This didn't quite work for me for some reason, but I wanted to thank you for taking the time to assist me with the project. Do you have a PayPal where I could buy you a cup of coffee as a thanks?
replace what I gave you before with this #top-menu .current-menu-item a::before, #top-menu .current_page_item a::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; } #top-menu li:not(.centered-inline-logo-wrap) a:before { content: ""; position: absolute; z-index: -2; left: 0; right: 100%; bottom: 50%; background: #c9992b; /*** COLOR OF THE LINE ***/ height: 3px; /*** THICKNESS OF THE LINE ***/ -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } #top-menu li a:hover { opacity: 1 !important; } #top-menu li a:hover:before { right: 0; } #top-menu li li a:before { bottom: 25%; } #top-menu li li a:hover:before { display: none; }
Daniel Grayling (1 year ago)
atlantis, I have another question for you. I realized later that negating the .centered-inline-logo-wrap from the affect also removed the static line below an active menu navigation item. I'm stumped on how to both remove the logo line but maintain the active menu one. Do you have any insight as to what I need to fix? Thank you!
Daniel Grayling (1 year ago)
This worked like a charm. Thank you tremendously much, design by atlantis!!
Andy Round (1 year ago)
Has anyone worked out how to get option 2 to work on both a primary and secondary menu?
Stéphane Issaurat (1 year ago)
hi, the crew ! very interesting video ! But, is it possible to customize each menu item with different colors (for example with the CSS classes of the menu option)?. THX
Elegant Themes (1 year ago)
Hello, yes it is possible using CSS.
Mohamed Idriss (1 year ago)
how to create my own stylesheet
jin hu (1 year ago)
It's not working .....
jin hu (1 year ago)
working now thanks ~~!~!
Especially the first is nice. Would like to have this option included in Divi.
cruz mejias (1 year ago)
This should be built into DIVI.
Dr Gyles Morrison (1 year ago)
There are LOADS of functions that should be allowed in Divi, but they are "wisely" not giving us everything we want, thus encouraging a Mod Nation who's members regularly create solutions ET won't make, and then these guys become authorised sellers of ET products. It all helps with ET getting more money. And I don't blame them.
Pascal (1 year ago)
Is it possible to exclude the submenus from the line style?
Adam G (1 year ago)
Hi Mak, in this video you said that the best thing is to apply the CSS code to a child theme as when Divi has an update it won't wipe out all your code. Are you really saying that any code added in Divi Theme Options Custom CSS would be lost? If so why the hell would this option be provided, just for testing purposes perhaps? Also what about code added to an elements Custom CSS tab, is that also wiped out when Divi is updated?
Kerrie Redgate (1 year ago)
Adam G Hi, Adam. I've been through several Divi updates and my CSS code in the Theme Options is fine. But every time I add any new code there, I always copy all my added code and I paste it in a file in the Notes app on my MacBook (and hence all my Apple devices) just in case anything weird happens, cyberspace being what it is! Mak actually has a great YT video on the Child Theme conundrum — cleared a lot up for me: https://youtu.be/16hLBAb-E2o
Adam G (1 year ago)
I'm looking forward to Mak's reply
Dr Gyles Morrison (1 year ago)
Definitely the code on pages will never go. In fact, that is probably easier than using a child theme if you are making a very specific CSS change. I honestly think you have nothing to worry about. Getting building my friend!
Adam G (1 year ago)
Hope you're right but I'd like to hear it from the horses mouth before I commit to it. And what about CSS added to a Page's CSS field on the Divi Builder Settings for a page and an element's Custom CSS tab? I'm hoping Mak will come back with answers for all thee 3 locations.
Dr Gyles Morrison (1 year ago)
I've been using Divi for over a year now. No update has ever effected the custom CSS section. I think ET are reluctant to say it could ever be effected simply because a major version update may replace the functionality in some way. But I trust it to work forever.
Thomas Sandberg (1 year ago)
This is not working for Extra?
AJ James (1 year ago)
What happens to the line with drop down menus?
MDS Nederland (1 year ago)
Will have the same affect
Pick Cick (1 year ago)
Awesome. Thanks Mak.
Thomas Piron (1 year ago)
Hey Mac, I believed that all css entered in Divi settings stayed even if I always use child theme. Thanks for all your videos!
Anthony C. Okeke (1 year ago)
Hi Mak, still no response.
Gumusdis (1 year ago)
It's awesome thanks! I just used it on my websites..

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.