Return to previous page

Show Secondary Menu on Hover from Menu item (Dropdown)

This topic has 6 replies, 2 voices, and was last updated 4 months, 3 weeks ago ago by Tony Rodriguez

W2M

Participant

December 10, 2023 at 21:18

Hello,

I would like to display the secondary menu only when a menu item on primary menu is hovered. I have added a CSS class (dd) to a menu entry from the main menu and the following code.

.header-bottom{display:none;}

.dd .header-bottom {display:block;}

Unfortunately this does not work and I cannot find the error.

#376228 Copied Theme version: 9.2.5

5 Answers

Tony Rodriguez

Support staff

December 11, 2023 at 06:39

Hello, @W2M,

Thank you for contacting us and for using XStore.

Please record a video of the problem for a better understanding. Upload it on a filesharing service, for example – https://wetransfer.com/ , and provide us with URL.

Furthermore, we would appreciate it if you could create temporary wp-admin access and share the details via the private content area. This will allow us to review your settings and better understand the issue at hand.

We kindly recommend that you take a complete backup of your site before proceeding.

Kind Regards,
8theme team.

Please contact administrator
for this information.

#376243 Copied

W2M

Participant

December 11, 2023 at 11:39

Hi,

I have uploaded the screenshots.

Please contact administrator
for this information.

#376298 Copied

Tony Rodriguez

Support staff

December 11, 2023 at 12:47

Hello, @W2M,

Thank you for providing the screenshots and wp-admin login access.

We are pleased to inform you that we have created a video tutorial to assist you with the creation of the dropdown menu on your website. We kindly request that you view the video in its entirety and adhere to the step-by-step instructions provided therein. https://www.veed.io/view/44e43947-c728-427b-9878-fda6786bf0dc?sharingWidget=true&panel=share

We trust that this resource will effectively address your needs.

Furthermore, we encourage you to peruse our theme documentation for additional guidance and best practices. https://xstore.helpscoutdocs.com/category/15-menu-set-up

Should you have any further inquiries or require additional assistance, please do not hesitate to reach out to us.

Warm regards,
The 8Theme Team

#376306 Copied

W2M

Participant

December 11, 2023 at 13:06

Hi Tony,

Thanks for the instructions.

I would like to display the complete secondary menu (bottom header) only when hovering over a specific menu field in the primary menu.
I have added the following CSS code.

// Header Bottom is hidden by default
.header-bottom{display:none;}

//Header Bottom is displayed when hovering over menu field 1 from the Primary Menu:
.dd:hover .header-bottom{display:block;}

Unfortunately the code does not work, have I entered the wrong CSS class?
.dd is the custom class in the primary menu

Please contact administrator
for this information.

#376310 Copied

Tony Rodriguez

Support staff

December 11, 2023 at 13:20

Hello, @W2M,

We apologize for any inconvenience caused, but we would like to clarify that the functionality you are seeking—to have the complete secondary menu (bottom header) appear only when hovering over a specific field in the primary menu—cannot be achieved through CSS coding alone.

As previously mentioned in our last correspondence, the only feasible method to create such a dropdown menu effect would be to follow the instructions we provided.

We appreciate your understanding in this matter.

Best regards,
The 8Theme Team

#376313 Copied
Tagged: dropdown menu themes, hover menu item, secondary menu hover, show menu on hover, woocommerce themes, wordpress dropdown menu, wordpress woocommerce menu
Viewing 6 results - 1 through 6 (of 6 total)