Horizontal Menu goes away on narrow displays - Car Wash template

kent8
Active member
Topic Author
Member

1 year 8 months ago #50242 by kent8

Horizontal Menu goes away on narrow displays - Car Wash template was created by kent8

I am using Carwash template to create a Joomla v4 site to replace an existing Joomla v3 site.
On this page:
nj41.gulfcoastwing.org/index.php/learn

the horizontal meu in the AboveContent module position WORKS on full screen desktop display.

However, on smart phone or tablet sized display, this menu disappears and is not visible at all.

Please tell me how to fix this problem ?

Thank you!
Kent

Please Log in to join the conversation.

milos
Support Staff
Moderator

1 year 8 months ago #50244 by milos

Replied by milos on topic Horizontal Menu goes away on narrow displays - Car Wash template

Hello,

Try adding this in the file /media/templates/site/carwash/css/custom.css:

Code:

@media (max-width: 991px) {

  nav.container_learn-menu.nav-collapse {
    clip: unset;
    max-height: 999px;
  }

  nav.container_learn-menu.nav-collapse  ul.mnu_learn-menu {
    height: auto;
  }

  nav.container_learn-menu.nav-collapse  ul.mnu_learn-menu li {
    float: none;
  }

}

Add this below other code, AFTER the last }

Regards,
Milos

Please Log in to join the conversation.

kent8
Active member
Topic Author
Member

1 year 8 months ago #50252 by kent8

Replied by kent8 on topic Horizontal Menu goes away on narrow displays - Car Wash template

Milos,
Thank you ! Works great !
The menu is pretty funky in mobile mode, as you can see when the browser is narrow:
nj41.gulfcoastwing.org/index.php/learn

Do you have any suggestions for another type of menu to use, that will behave properly in mobile mode?
Or perhaps more custom CSS to make this one behave ?

Please let me know.

Regards,
Kent

Please Log in to join the conversation.

milos
Support Staff
Moderator

1 year 8 months ago #50253 by milos

Replied by milos on topic Horizontal Menu goes away on narrow displays - Car Wash template

Hello,

Try this code instead (just one line is added):

Code:

@media (max-width: 991px) {

  nav.container_learn-menu.nav-collapse {
    clip: unset;
    max-height: 999px;
    position: relative !important;
  }

  nav.container_learn-menu.nav-collapse  ul.mnu_learn-menu {
    height: auto;
  }

  nav.container_learn-menu.nav-collapse  ul.mnu_learn-menu li {
    float: none;
  }

}

Regards,
Milos

Please Log in to join the conversation.

kent8
Active member
Topic Author
Member

1 year 8 months ago #50255 by kent8

Replied by kent8 on topic Horizontal Menu goes away on narrow displays - Car Wash template

Milos,
Thanks very much, that does help quite a bit.

Regads,
Kent

Please Log in to join the conversation.

Time to create page: 0.193 seconds