Many Avada users are unable to find the hover settings after Avada 7.9 version. It has a new UI hence its not seen but its there. The Menu Element is a versatile element that allows you to create and customize navigation menus for your website. In this blog post, we will focus on setting the hover state for menu items in the Menu Element of Avada Builder. By adding hover effects, you can enhance the user experience and add a touch of elegance to your website’s navigation.
Step 1: Access Avada Builder:
Log in to your WordPress dashboard, navigate to the page where you want to edit the menu, and click on “Edit with Avada Builder.” Alternatively, you can create a new page and access Avada Builder by clicking on the “Use Avada Builder” button.
Step 2: Add or Edit the Menu Element:
If you’re starting from scratch, click on the “+” icon to add a new element and choose “Menu” from the Elements list. If you already have a Menu Element on the page, locate and click on it to edit.
Step 3: Open the Menu Settings
With the Menu Element selected, click on the “Settings” icon (gear icon) to access the Menu Settings panel.
Step 4: Customize the Menu Style
In the Menu Settings panel, you will find various customization options to style your menu. Focus on the “Circle” icon that appears in front of Main Menu Item Text Color for text color, as this is where you can select the hover state for the menu item to set a color. Notice the same circle on other fields and that’s where you can select the hover state for the relevant fields and then define color.
Step 5: Adjust Hover Color Settings
Once a color is selected for hover state, you can click the circle again to go back to the normal state color.
Step 6: Save and Preview
Once you have set the hover state and customized the menu style to your liking, click on the “Save Changes” button to save your modifications. Then, click “Preview” to see how your menu items respond to hover actions.
Conclusion:
Customizing the hover state for menu items in the Menu Element of Avada Builder can greatly enhance the user experience on your website. With a wide range of hover effects available, you have the freedom to add a touch of interactivity and elegance to your website’s navigation. By following this guide, you can effortlessly set up hover animations that complement your website’s design and create a visually appealing and engaging menu. Experiment with different styles, and don’t forget to save your changes to enjoy a seamlessly interactive menu with Avada Builder.
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?