Horizontal menu Topic is solved

[zinnorov]

Hey. I can't align the built-in menu horizontally. It's vertical every time. nav-pills or nav-tabs, the only difference is - it makes the menu background gray. Can Solidres or Quix override that? I use these two extensions only.

[AMurray]

Nav-pills was a CSS class in Joomla 3, Protostar but as far as I know, doesn't work in Joomla 4 (Cassiopeia). There are other methods for making the Menu module a horizontal menu with drop-down sub menus.

Can you confirm what Joomla version and template you're using?

These may help:

• viewtopic.php?f=815&t=988015
• https://magazine.joomla.org/all-issues/ ... ips-tricks (see section "4.7 Menu" and note the additional link in that section.

[zinnorov]

Nav-pills was a CSS class in Joomla 3, Protostar but as far as I know, doesn't work in Joomla 4 (Cassiopeia). There are other methods for making the Menu module a horizontal menu with drop-down sub menus.

Can you confirm what Joomla version and template you're using?

These may help:

• viewtopic.php?f=815&t=988015
• https://magazine.joomla.org/all-issues/ ... ips-tricks (see section "4.7 Menu" and note the additional link in that section.

Joomla 4.2.9 and Cassiopeia.

[AMurray]

Did the solutions in those links work? You configure the dropdown through the menu module.

If it was to work, I recall that it had a space preceding "nav" as in " nav-pills" but I'm not sure it will work in Cassiopeia.

[zinnorov]

I tried the links you provided, and the menu is still vertical.

[AMurray]

Did you put the menu module in the "menu" module position? That would be the first place to start. I don't know how to make it function any other way.

Is the site online (live) - can you provide a link to show us the behaviour you're seeing? Noting the menu will collapse to a vertical menu on mobile devices. Is that perhaps what you're seeing?

I thought this was a problem on a normal Cassiopeia template, but you're using Quix page builder, which might be part of the problem.

[zinnorov]

The site is offline currently. As I see, the Quix overrides the main CSS. It uses the "!important" tag in its CSS.

[zinnorov]

So the problem was actually in template.min.css. The flex-direction in .mod-menu was set to column. I changed it to row, and it works!