How to use

Introduction

This guide is for implementing the unique Menu Hover Effects. This documentation will walk you through the process of adding these effects to your website menu, making it more interactive and engaging for your visitors.

Requirements

• Basic understanding of HTML and CSS.
• Access to your website’s stylesheet and HTML files.

For Elementor Users

If you’re using Elementor, you can follow these steps to add custom CSS hover effects to your menu:

1. Open the Page/Template:
   • Navigate to your WordPress dashboard and open the page you wish to edit with Elementor.
     
   • Edit your “header”, “footer , or template that contains your menu.
     
2. Add/edit your navigation element:
   • Navigate to your menu element or add the “WordPress Menu” element in the elements tab.
     
   • Disable Elementor’s default pointer settings.
     
   • Click the “advanced” tab on your element.
     
   • Navigate to the “Custom CSS” dropdown.
     
3. Copy CSS style code:
   • Copy your desired menu hover style from the library.
     
4. Add the CSS Code:
   • Paste the CSS styles into the text area in the “Custom CSS” dropdown.
     
5. Edit colors:
   • Some menu styles use the default “Pointer” colors in Elementor. Navigate to the “Style” tab on your menu, then click “hover”, and finally edit the “color” under the color picker.
     
   • Optional: To override Elementor’s default color styles, use !important before the closing “;”.
     
6. Save and Publish:
   • Click “Update” or “Publish” to apply the changes.

For Bricks Builder Users

If you’re using Bricks Builder, follow these steps to integrate your custom CSS hover effects:

1. Open the Page/Template:
   • Navigate to your WordPress dashboard and open the page/template with your menu element you wish to edit in Bricks Builder.
2. Navigate to Custom Code:
   • Find the sidebar in the Bricks Builder interface.
   • Navigate to “Style”
   • Click on the “CSS” dropdown to access the coding area.
3. Add the CSS Code:
   • Copy the CSS code for your desired hover effect.
   • Paste it into the “Custom CSS” box.
4. Save and Publish:
   • Click “Update” or “Publish” to apply the changes.

For Oxygen Builder Users

If you’re using Oxygen Builder, follow these steps to add your custom CSS hover effects:

1. Open the Page/Template:
   • Navigate to your WordPress dashboard and open the page/template with your menu element you wish to edit in Oxygen Builder.
2. Disable Dropdown Arrows:
   • Go to the menu component settings.
   • Make sure the option “Enable Dropdown Arrows” is unchecked to avoid any conflicts with the hover effects.
3. Create a Stylesheet:
   • Click on ‘Manage’ in the top menu.
   • Select ‘Stylesheets’.
   • Click ‘Add Stylesheet’, and give it a name.
4. Add the CSS Code:
   • Copy the CSS code for the hover effect you wish to implement.
   • Paste it into the new stylesheet you’ve created.
5. Save and Apply:
   • Save the changes to your stylesheet and make sure it’s applied to the page.

Troubleshooting

If the hover effects are not appearing, double-check the following:

• Your class or ID names match between the HTML and CSS files.
• There are no typos in the CSS code.
• The stylesheet is properly linked in your HTML file.
• Report a bug on the contact page.

Conclusion

That’s it! You’ve successfully added a dynamic hover effect to your menu. Feel free to mix and match different hover effects to find the one that best fits your brand.

For further assistance, please contact our support team.