Joomla Templates Club 406,261 posts

[c45rs82wVm9y Friend c45rs82wVm9yJoin date: August 2016Posts: 62Downloads:33Uploads:13 Thanks: 19 Thanked: 1 times in 1 posts]

#961520

Hi,

I’m testing on localhost. My vertical menu has lots of menu items —- so many, in fact, that it exceeds the height of the viewport. Normally a scroll bar should appear on the right side of the vertical menu so that the user can scroll down to access the menu items that fall beneath the viewport. However, that scroll bar does not appear, so there is no way to access the menu items at the bottom of the vertical menu.

I’m using the default dashboard layout, but I set the menu to "Vertical" orientation in the T3 admin area.

How do I trigger the scroll bar so that the user can scroll down to see the menu items at the bottom of the long vertical menu that exceeds the height of the viewport?

Thanks in advance!

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#961918

@c45rs82wVm9y

I tried to create more items for the main menu and still can mouse scroll easily: http://prntscr.com/c8t1cg

[c45rs82wVm9y Friend c45rs82wVm9yJoin date: August 2016Posts: 62Downloads:33Uploads:13 Thanks: 19 Thanked: 1 times in 1 posts]

#962369

Hi,

Thank you for your help. On some pages the scroll bar is "thin," as in your screenshot, and on other pages the scroll bar is "wide." When it is thin, I can’t click and drag (or touch and drag) it, and therefore cannot view the menu items below the viewport. I’m testing in Firefox. Is there a way to make sure it’s always wide?

PLEASE SEE ATTACHMENT

Please test in Firefox 360×640 orientation:

"Thin" example: http://ja-intranet.demo.joomlart.com/index.php/en/dashboard-vertical

"Wide" example: http://ja-intranet.demo.joomlart.com/index.php/en/discussions

Thank you

---

Attachments:

1. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#962598

We custom that scroll bar so it looks thin like that, if you don’t want to use, just go to the JS file: ROOT/templates/ja_intranet/js/script.js

At approx line 79, remove or comment this line of code:

$(".navbar-default-vertical").mCustomScrollbar();

1 user says Thank You to Saguaros for this useful post

1. c45rs82wVm9y

[c45rs82wVm9y Friend c45rs82wVm9yJoin date: August 2016Posts: 62Downloads:33Uploads:13 Thanks: 19 Thanked: 1 times in 1 posts]

#962780

Excellent! That worked very well 🙂

Thank you!

[1option Friend 1optionJoin date: April 2010Posts: 49Downloads:184Uploads:4 Thanks: 9]

#962788

How would you remove the text from the vertical menu so only the icons show?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#962862

You can simply define the width for the navigation bar:

• Go to file: ROOT/templates/ja_intranet/css/custom.css (create this file if it doesn’t exist)
• Add this rule:

div.t3-wrapper.layout-vertical.navbar-hidden .navbar-default-vertical {
   width: 50px;
}

or change to your desired value

[1option Friend 1optionJoin date: April 2010Posts: 49Downloads:184Uploads:4 Thanks: 9]

#962866

This reply has been marked as private.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#962875

You can use this:

div.t3-wrapper.layout-vertical .navbar-default-vertical {
   width: 50px;
}

it will apply to all view ports.

[1option Friend 1optionJoin date: April 2010Posts: 49Downloads:184Uploads:4 Thanks: 9]

#962876

This reply has been marked as private.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#962880

You can send me the admin and ftp account of your site, I will check it further.

[1option Friend 1optionJoin date: April 2010Posts: 49Downloads:184Uploads:4 Thanks: 9]

#962881

This reply has been marked as private.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#962882

Could you send screenshot highlighting the green button you’re referring to?

[1option Friend 1optionJoin date: April 2010Posts: 49Downloads:184Uploads:4 Thanks: 9]

#962883

This reply has been marked as private.

[1option Friend 1optionJoin date: April 2010Posts: 49Downloads:184Uploads:4 Thanks: 9]

#963084

This reply has been marked as private.

[Author]

Posts