Scrolling Menu Or Reducing Space In Rows Menu
Michael Nolden
Hi there,
I use the educon Template and got a crazy issue with the mainmenu especially the sub-menuparts. As school we have to list all subjects on the homepage so that there is a long list in the menu. But the problem is that the list is for HD-Resolutions (and iPads aswell) so long that the menu-items at the bottom cant be seen.
Is there a possibility to reduce the spacing between these rows in the menu or even make it kind of scrollable?
When I open the menu right now and scoll, the hole page scrolls down so that the menu closes.
Example for the menu: "Unterricht -- > Fächerübersicht --> long list"
Here is a Screenshot: https://ibb.co/5czFXkV
Ofi Khan
Accepted AnswerHello Michael Nolden
Please use this CSS to Template Options -> Custom Code -> Custom CSS. I have used 500px as maximum height. You can adjust the height as per your requirement.
.sp-menu-item:nth-child(4) .sp-dropdown-sub{
max-height: 500px !important;
overflow: auto !important;
}Best regards
Ofi Khan
Accepted AnswerI have a humble request. It would be very kind of you if you can manage some moment to give us feedback here:
Michael Nolden
Accepted AnswerHi @Ofi Khan,
maybe you can help me again, there is another issue with the sub-menu-bar from our school homepage.
The menu "unsere schule" has so many rows that some screen resolutions cant show them all. I would like to add an scroll bar like you gave me the tipp above. But I absolutly dont know how or where to do that?
Could you help me again?
Ofi Khan
Accepted Answeryes, this time use this CSS to Template Options -> Custom Code -> Custom CSS
.sp-menu-item:nth-child(2) .sp-dropdown-main{
max-height: 500px !important;
overflow: auto !important;
}Michael Nolden
Accepted AnswerThanks, I did add this in the CSS-Custon Area but nothing changed? Any ideas?
Ofi Khan
Accepted AnswerPlease take custom.css file under templates/shaper_educon/css folder and add the CSS. CSS is not loaded on your site. Hopefully, this solution will work.
Michael Nolden
Accepted AnswerI am so sorry to say that, but I dont understand what you mean with "add CSS. CSS is not loaded on your site"
Could you give me an explaination or screenshot to that?
Ofi Khan
Accepted Answerokay. Please follow the steps.
- Go to this location: templates/shaper_educon/css
- Take a new file here.
- Give the name custom.css
- Then add the CSS code in this file
- It will look like this: https://prnt.sc/24020o0
Michael Nolden
Accepted AnswerI cannot open your screenshot you uploaded, there is always (also in other threads) this error:
BUT: Its working now fine!!
Thank you so much!!! <3!!
Ofi Khan
Accepted AnswerYou are welcome. I am glad that it helped. I have a humble request. It would be very kind of you if you can manage some moment to give us feedback on Joomla Extension Directory. This will inspire us to improve.