Scroll Bar Within The Categories Menu

Hello,

I would like to know if it is possible to put a scrollbar in my “Browse Categories” Menu as I have quite a bunch of categories that can’t go into 2nd or 3rd tier menu slots so they all have to be first tier.

The menu ends up being too long for the screen size.

Thank you!

Hello,

Please provide your site URL so that we could provide you with custom CSS. If your site is under maintenance, please provide your site admin access in the private area

Best Regards

Awesome I have added in the link to the website, please note that this only happens on smaller screens like the laptop screens. For Desktop it is fine for now, however as more products become available it will probably also end up becoming too long for the desktop screens as well

Hello,

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

body .vertical-navigation .menu-item-design-full-width .sub-menu-dropdown{
max-height:100px!important;
overflow-y:auto;
}
 body .vertical-navigation .menu-item-design-full-width .sub-menu-dropdown::-webkit-scrollbar {
		width: 3px;
}
		
body .vertical-navigation .menu-item-design-full-width .sub-menu-dropdown::-webkit-scrollbar-track {
	background-color: rgba(0,0,0,.15);
}
		
body .vertical-navigation .menu-item-design-full-width .sub-menu-dropdown::-webkit-scrollbar-thumb {
		background-color: rgba(0,0,0,.25);
}
		
body .vertical-navigation .menu-item-design-full-width .sub-menu-dropdown::-webkit-scrollbar-thumb {
		background-color: rgba(0,0,0,.25);
}

Best Regards

Hi there, please see attached screenshots. I added the code above but it didn’t change anything in terms of how it works on my laptop.

Attachments:

You must be logged in to view attached files.

i see my file didn’t upload for my laptop screen, so im adding it here

Attachments:

You must be logged in to view attached files.

Also added my desktop screen to show you that there are more items in the menu

Attachments:

You must be logged in to view attached files.

Hello,

Please provide the site admin access to the private area.

Best Regards

Hi there, so i have sync’d my staging website to the production website.

So if you can please log into the staging website and see what you can do there. And then please to let me know how to replicate it on the production site. As I won’t be syncing back from staging to prod as I have to keep prod running in order for my customers to keep using it.

Hello,

You can export the Theme Settings and import on your production file. Then copy all from custom CSS in the Theme Settings and paste in the same place on your production.
In addition, check the Appearance > Widgets and configure all in the same way or copy code to widgets.

Best Regards

Good Day, please note that the issue still remains on my laptop on the stagin site. I am looking to scroll up and down on the main menu and not just the submenu (i do still want to keep the scroll affect on submenu), please see screenshot indicating what is going on.

Attachments:

You must be logged in to view attached files.

Hello,

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

body .menu-categories-container {
height:300px;
overflow-y:auto;
overflow-x:hidden
}
body .menu-categories-container::-webkit-scrollbar {
		width: 3px;
}
		
body .menu-categories-container::-webkit-scrollbar-track {
	background-color: rgba(0,0,0,.15);
}
		
body .menu-categories-container::-webkit-scrollbar-thumb {
		background-color: rgba(0,0,0,.25);
}

Best Regards

Still no affect

Hello,

Please clean the cache, if no effect, provide your site admin access to the private area.

Best Regards

thank you, i did try that but no luck, please us same login details as above mentioned in private area

Hello,

Please provide the site admin access to the private area

Best Regards

Sorry Eloise, I am not understanding what you are asking for.

The private are is above in this thread and I don’t have access to give you this website forums private area information.

Please see my post at May 21, 2020 at 6:58 am Post https://xtemos.com/forums/topic/scroll-bar-within-the-categories-menu/#post-196975

If you are asking that the user I created in the above posts private area has access to admin functionality on my website, then it already has.

Hello,

I do apologize for the confusion. I have missed the option which allows a set number of categories in the Browse category menu. https://prnt.sc/soyibh

Please delete the code and use this option.

Best Regards

Hi! I have the same problem! I have too many items in the category menu and they do not fit in the screen of the desktop. Please resend the custom CSS to add a scroll bar in the category menu.

Thanks

Attachments:

You must be logged in to view attached files.

I have set the max quantity of items in the category menu but that is not workable as when I open the other items still can not see all the categories (my menu is sticky so it does not change)
I need a scrolling bar in the Category menu as asked. Thanks!

Attachments:

You must be logged in to view attached files.

I have already managed to do it! Thanks! I put the mobile menu on the desktop header (instead of the categories menu) and it works! I dont know about mega menus but I dont need them in this moment.

[Author]

Posts