Return to previous page

Sub Menu on Department Menu to Appear on Hover with Scrollbar

This topic has 8 replies, 3 voices, and was last updated 1 months, 3 weeks ago ago by Luca Rossi

Vijith

Participant

September 22, 2024 at 18:16

Hello There,

First of all thank you for your continuous support on the queries – I really appreciate your effor in attending the queries and providing responsive support.

Actually, I had to disable the “Pro Elements” plugin in order to achive the maximum performance from xStore theme. (I had tried several other options and it seems disabling the “ProElements” is the best).

The site is working with great speed now.

However, I need your support to have Sub-menu of the Deparment menu to appear on However with the Scroll bar for each section. (I have two columns on the sub menu).

I had earlier received custom CSS for the Elementor Builder. However, I am not using the elementor builder as I have already disabled the “Pro Elements”

Appreciate your support to get this work on the site.

Provided the Admin user account details in the private content area (if required)

Please, contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#415434 Copied Theme version: 9.4.1

7 Answers
Tony Rodriguez

Support staff

September 23, 2024 at 06:23
Hello, @Vijith,

We are pleased to inform you that the issue you reported on your website has been successfully resolved. The solution involved the implementation of custom CSS, which you can review and modify according to your needs. The specific CSS has been placed under the following navigation path on your site: Xstore >> Theme Options >> Theme Custom CSS >> Global CSS.

For your reference, please find the custom CSS used to address the issue below:
```
.header-bottom .secondary-menu-wrapper ul#menu-all-departments {
    height: 400px !important;
    overflow-x: auto !important;
    overflow-y: scroll !important;
}
```
Additionally, we have provided screenshots to guide you through the changes made. You can view these screenshots at the following links:
(https://ibb.co/jVBqhvq)
(https://ibb.co/Gdh5w7h)

Should you have any further questions or require additional assistance, please do not hesitate to contact us.

Best Regards,
The 8Theme Team
#415459 Copied
Vijith

Participant

September 23, 2024 at 19:23

Dear Tony,

Thank you for your support.

But, I still have to click on each sub-menu item to visit the items on sub menu (Actually, I needed the sub / sub-menu to be be displayed on hover.). Please click on any of the sub-menu (It will open up a new window with the category menu) – I need that category menu to be opened when hovering.

Please refer to attached image for the Menu which I had earlier before I disable the “Pro Element” Plugin.

Appeciate your support.

Thank you.

Files is visible for topic creator and
support staff only.

#415572 Copied

Luca Rossi

Support staff

September 24, 2024 at 10:42

Hi @Vijith,

Please remove the previous custom CSS codes.

Then assign the static block for each category item:

– https://prnt.sc/k6vNkY-BGWRf
– https://prnt.sc/_R6sZ_nLcUnt

Please note each category item, you have to create one static block.

Hope it helps!

#415671 Copied

Vijith

Participant

September 24, 2024 at 17:19

Hi There,

Thank you.

I removed the previous custom CSS and added a static block to the Department Submenu and I have attached the screenshot.

The menu is not appearing as expected.
The sub-menu shall be fixed at the hight of 600px accodingly the Static Block to be fixed at the height of 600px and to have Scroll bars to the Submenu and to the Static Block. (3 scroll bars)

Please check the screenshot and appreciate if you could please support me get this fixed.

Files is visible for topic creator and
support staff only.

#415721 Copied
Luca Rossi

Support staff

September 25, 2024 at 08:13
Dear Vijith,

We hope this message finds you well.

We kindly request your assistance in adding the following custom CSS code to implement two scroll bars beneath the static block columns:
```
.menu-static-block.nav-sublist-dropdown section.elementor-inner-section > .elementor-container > .elementor-column {
    max-height: 500px;
    overflow-y: scroll;
}
```
Please note, at present, it is not feasible to introduce a scrollbar to the categories list without obscuring the static block.

Thank you for your attention to this matter.

Best regards,
The 8Theme Team
#415769 Copied
Vijith

Participant

September 25, 2024 at 09:49

Thanks Rossi,

I need to have the fixed height for department menu as well. (I mean the fixed height of 500px with scroll.

I tried to apply the one you provided earlier which is not working. (The sublist is not appearing).

Appreciate your support.
Thank you.

#415789 Copied

Luca Rossi

Support staff

September 25, 2024 at 12:09

Hi @Vijith,

Currently, it’s impossible right now.

If you set the max-height & add the scroll bar to the department menu. The static block will be hidden because of the overflow CSS attribute.

Best regards,
The 8Theme Team

#415818 Copied
Tagged: advanced wordpress menu features, hover menu woocommerce wordpress, woocommerce sub menu hover, woocommerce templates customization, wordpress department menu scrollbar
Viewing 8 results - 1 through 8 (of 8 total)