Show Secondary Menu on Hover from Menu item (Dropdown)

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

  • Avatar: W2M
    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.

    5 Answers
    Avatar: Tony Rodriguez
    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.
    Avatar: W2M
    W2M
    Participant
    December 11, 2023 at 11:39

    Hi,

    I have uploaded the screenshots.

    Please contact administrator
    for this information.
    Avatar: Tony Rodriguez
    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

    Avatar: W2M
    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.
    Avatar: Tony Rodriguez
    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

  • Viewing 6 results - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.