Categories Menu in header

Hi,

I would like to implement the custom code you gave me here in another website i have.
https://xtemos.com/forums/topic/categories-menu-in-header/

I paste the code to global css, but didnt work.

I would like to add a scroll to browse categories in header because i have nearly 20.

Thank you!

Hello,

If you mean widgets, you do not need this code anymore as there is the option to set this scroll.

You can set the height for the widgets: Height for filters widgets in the Theme settings > Product archives > Widgets and if the widgets quantity generates more height than it is set, the scroll would appear automatically.

If you have any questions please feel free to contact us.

Best Regards

Hi,

I did the above but nothing happens.
The Browse Categories in header do not appear a scroll even if i add a height and enable the scroll option on widgets tab in theme options.
Please check screenshots attached here.

I miss anything else?

Attachments:

You must be logged in to view attached files.

Hello,

Please, provide your site admin access (insert the site credentials into the Private content block under the message area).

Best Regards

done!

Hello,

It works on your site the scroll appears on hover: https://gyazo.com/144c219019bfb4bb783ecf32ca77e1fc

If you have any questions please feel free to contact us.

Best Regards

These widgets has nothing to do with woodmart. They are based on ajax filter plugin and i customized them based on plugin options.

Again i want the Browse Categories on header to appear a scroll because i have many categories. Just like we did in the old thread i mentioned in my first message.

Thank you.

I also provide photo from widget in case you didnt understand.

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.wd-nav-vertical{
	max-height: 310px;
	overflow: hidden;
	overflow-y: auto;
	padding-right: 30px;
}

body .wd-nav-vertical {
  --scrollbar-track-bg: rgba(0, 0, 0, 0.05);
  --scrollbar-thumb-bg: rgba(0, 0, 0, 0.12); 
}
body .wd-nav-vertical::-webkit-scrollbar {
  width: 5px; 
}
body .wd-nav-vertical::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track-bg); 
}
body .wd-nav-vertical::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-bg); 
}

Best Regards

Thank you for the code it seems to work but it breaks the megamenu because its not working now.
In Browse Categories in first menu tab i have a megamenu and when i add the code its not opening.

If i remove the code, it works ok.

Hello,

I am afraid you will need to make the choice: you can have a scroll or mega menu blocks, it is not possible to have both.

If you have any questions please feel free to contact us.

Best Regards

For what reason i have to choose?
Why mega menu is not working with the scroll code?

Hello,

When we add a scroll we have to add overflow: hidden property to the main menu, what makes it impossible to show the mega menu blocks.

Scroll is not possible without this properly. Mega menu is not possible with this property.

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts