Scrolling menu or reducing space in rows menu - Forum | JoomShaper
Solved Templates

Scrolling menu or reducing space in rows menu

Asked by Michael Nolden 5 years ago Last activity 4 years ago

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

Accepted answer

Marked as the solution
Ofi Khan Staff
5 years ago

Hello 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

11 more replies

Oldest first Newest first Most helpful
Michael Nolden Asked this
5 years ago

That worked well, thank you!!

Ofi Khan Staff
5 years ago

You are welcome

Ofi Khan Staff
5 years ago

I have a humble request. It would be very kind of you if you can manage some moment to give us feedback here:

  1. JED
  2. Trustpilot
Michael Nolden Asked this
4 years ago

Hi @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 Staff
4 years ago

yes, 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 Asked this
4 years ago

Thanks, I did add this in the CSS-Custon Area but nothing changed?
Any ideas?

Ofi Khan Staff
4 years ago

Please 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 Asked this
4 years ago

I 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 Staff
4 years ago

okay. Please follow the steps.

  1. Go to this location: templates/shaper_educon/css
  2. Take a new file here.
  3. Give the name custom.css
  4. Then add the CSS code in this file
  5. It will look like this: https://prnt.sc/24020o0
Michael Nolden Asked this
4 years ago · edited

I cannot open your screenshot you uploaded, there is always (also in other threads) this error:

https://ibb.co/C1qr4VK

BUT: Its working now fine!!

Thank you so much!!! <3!!

Log in to reply.