By default Avada theme doesn’t have any option to chose any background color for hover for main menu but its available only for Sub-Menu Items. In this tutorial I’ll provide you with the CSS solution on how you can add a hover with background colors in ‘Avada’ Theme.
There are 5 Header versions available in Avada and each one have different layouts. I am going to target the Header Version #1 for the Menu Item but the solution will work on all header versions including the Side Header Position. Below Image is an example result of background color being added to the header version #1.
As you can see in the above image, a nice hover background-color is added for the Main Menu. Below is the CSS that is being used for the Above Hover effect. You can add this piece of CSS into your Theme Options -> Custom CSS section.
The CSS above can definitely be adjusted, you can change the text color, background color, increase OR decrease the padding as per your need OR more CSS properties can be added but the above CSS is just the basic CSS you’ll need to get the hover working for Avada Theme.
Note: For the Sub-menu items hover background-color, you can already control it from Theme Options –> Styling –> Main Menu Color section.
And replace the word main with secondary of the above given CSS if you want to target the secondary menu of Avada Theme.
Dear Author!
Thanks for this super hack, I tried to figure how can I make it, but I can’t find the right solution so far. Could you help me please, how can I make the MAIN menu still colored backgrounded, while it’s submenu (page) is active.
Thank you,
Janos
The given solution will definitely work as the active menu item on a page as well. Give it a try.
is there any way to change font size and color of “Contact Info” (top bar) im using avada 4.0.2
Yeah you can, If you are using 3.9.4 or less versions, change it from Theme Options -> Styling -> Secondary Menu Colors section and change Secondary Menu Font Color – First Level & Contact Info. And if you are on 4.0+ versions then from Theme Options -> Menu -> Secondary Top Menu section, change the Secondary Menu Font Size.
Hi Muhammed, is there anyway to change the secondary menu contact info for 4.0 using CSS? My secondary menu doesn’t allow for the drop down to occur like it normally would, as I believe there is a glitch in my updated version. Thus, I would have to manually input the contact info in using CSS, but I’m not sure how to do that? Any help would be appreciated. Thanks!
Hello Gianna,
Actually Theme Options should work and its NOT possible to change the contact info with CSS since CSS is for styling only. If theme isn’t working properly then you can open a support ticket with the details of the website and we’ll get back to you.
Thanks
Hey, you seem to cover all the options in this great article and the comments, but I’m trying to get a hover effect on the secondary menu using 4.0.3. It has hover options for the secondary drop down in the shortcode, but not for the actual menu items. I’ve tried going through the code, but can’t find it unfortunately. Any ideas?
You need to use the same given CSS and just replace CSS class word from main to secondary and it will work. I also mentioned this at the bottom of the post ;)
Thank you for this, you made quick work for me. I’m not sure why Avada don’t give these simple options, considering their customisation area.
Because its not part of the original Menu Design ;) Anyways, its not a big deal CSS customization so which is why I wrote this short tutorial to help Avada users like yourself :)
Dear Author!
Thanks for this hack. It is nice to share this tips.
Thanks Alan :)
hi
how can I put the Main Menu Highlight Bar below menu in avada.
best Regards
Go to Theme Options -> Menu -> Main Menu section and set the Main Menu Highlight Bar Size to 0. Then add the below CSS into your Theme Options -> Custom CSS section to display a border at the bottom.
.fusion-main-menu > ul > li > a {
border-bottom: 3px solid #a0ce4e !important;
}
Hello Muhammad ,
thenks for your blog!
I ‘ve a Top menu that loads diferent pages. Each page has its own main menu.
My goal is to keep the selected option of the Top Menu always selected across the different pages. My problem is that, when i navigate throught the pages of the main menu, the Top Menu loses the Highlight.
Any clue if I’ve to achive by modifiv the CSS or by functions at any php.file?
Thanks for any help!
I’ve been trying to replace the hover color for the secondary menu for weeks now and looking at page after page of custom CSS that didn’t work. I try your solution – changed it to secondary – and suddenly I’m in business. Had to leave a message to say thank you!
Awesome :) Thanks for your message <3
Thanks for you amazing tips!
Need help with two items:
(1) How can we change the color of the top header bar? We’re using Avada’s menu style #2
(2) Instead of using Avada’s top header Contact Info, how can we add a Social Media icon (fa-phone) to the top header with a “tap to call” effect on mobile and using our phone number?
Thanks!
Thanks!
This post helps me to bring the menu bar from top to the bottom. This is great.
http://volgelingenvanjezus.nl/
But there is one thing left…
As you can see: When i move with my cursor through the menu bar, the menu text start black and change to yellow. I want it yellow al the time. Do you have any idea?
The css code i use now is:
/*MAIN-MENU*/
.fusion-body .fusion-main-menu .current-menu-ancestor > a, .fusion-body .fusion-main-menu .current-menu-item > a, .fusion-body .fusion-main-menu .current-menu-item:not(.fusion-main-menu-cart) > a::before, .fusion-body .fusion-main-menu .current-menu-parent > a, .fusion-body .fusion-main-menu .current_page_item > a {
color: #333333;
border-bottom: 5px solid #fdb813 !important;
}
.fusion-is-sticky .fusion-main-menu .fusion-widget-cart-counter > a:hover::before, .fusion-is-sticky .fusion-main-menu > ul > li > a:hover, .fusion-is-sticky .fusion-main-menu > ul > li.current-menu-item > a, .fusion-main-menu .fusion-widget-cart-counter > a:hover::before, .fusion-main-menu > ul > li > a:hover {
color: #333333;
border-bottom: 5px solid #fdb813 !important;
}
Waiting for response,
Wim
Did you have any solution for the Avada Vertical and Horizontal Menu Widgets? I would use the vertikal menu but it looks a little bit poor ;) It was great to have a sidebar menu with hover effect.
Hi how do i change the main menu font color for the home page only while the rest of the pages use default color set ?
TO make it work for specific pages, please use the below CSS into your page’s Fusion Builder CSS area.
.fusion-main-menu > ul > li > a {color: #2b2e32 !important;
}
Hi Muhammad,
I used you CSS hack to put the menu highlight Bar Below the Main Menu. However it now shows up across the whole menu instead of only showing when the page is active or when the cursor is hovering over the menu Item.
I have got a single page parralax so using custom relative menu links eg #about us.
Any ideas?
Thnaks
Likely the menu is using absolute URLs. Have you set up the menus for the website as mentioned in this documentation?
Where can I customise the vertical menu when I use this in a footer widget? can’t seem to find it.
Hi there.
Is there a way to have different main menu font hover/active colors for each menu item?
Thanks in advance.
Yes, its possible through custom CSS. Each menu item has its own CSS ID and that can be used to target the hover of each menu item. An example CSS is below;
#menu-item-70 > a:hover {
border-color: #2ca899 !important;
}
I use Avada and chose header number 5 with the logo in the center. I would like to move the main menu over the logo. How to do it?