Menus are truncated

[thecure]

Just test going from J3 tp J4 in my localhost, it works, only thing is the menus are truncated (see attached images) , Im using Cassiopeia, any help on how to fix it.

[mjparadac]

Hello thecure

Have you migrated from J3 to J4?
Have you verified the order of your menu in the manager?

What do you mean when you say it's truncated?

[thecure]

In the screenshots attached you may see the problem.

Migrate from Joomla 3 to Joomla 4 on my localhost, used to have a horizontal menu with two rows, now only displays one row, any hints?, best

[AMurray]

I don't really see what the problem is (the screenshots don't demonstrate the problem clearly enough).

Since the site is not actually live, can you do a screen-capture video to further demonstrate the problem? (such as screencastify - chrome plugin)

Perhaps the difference is between the former template and Cassiopeia which simply may not accommodate the previous menu setup.

What template did you use in J3?

[thecure]

in J3 we use the Keenley template (wright framework) from Joomlashack, in j4 I set the cassiopeia

[Per Yngve Berg]

I clearly see the 3 or 4 last Items is thrown off the screen.

Is Cassiopeia in Fluid or Static Width Mode?

What Layout is set on the Menu Module? I use "Default Collapsible".

I cannot reproduce the issue, but I don't have that many items. The Items are moved to the next line when I shrink the browser window.

[ceford]

I have a local test site with 13 menu items. I just moved it from the right to the menu position and find that it wraps. This is just a piece of it:

wrapped-menu.png

I suggest you open your browser Developer Tools and see if you can find the div that contains the menu. It seems to be the grid-child class that needs fixing.

menu-inspect.png

[thecure]

I clearly see the 3 or 4 last Items is thrown off the screen.

Is Cassiopeia in Fluid or Static Width Mode?

What Layout is set on the Menu Module? I use "Default Collapsible".

I cannot reproduce the issue, but I don't have that many items. The Items are moved to the next line when I shrink the browser window.

Use static , change to fluid and is the same effect. When use collapsible default menu layout, the 2nd line menus apears ok, but submenus stops working( event with the submenu -on-). Change back to collapsible dropdown and menus don´t move to the next line, but submenus work ok.

[thecure]

I have a local test site with 13 menu items. I just moved it from the right to the menu position and find that it wraps. This is just a piece of it:

wrapped-menu.png

I suggest you open your browser Developer Tools and see if you can find the div that contains the menu. It seems to be the grid-child class that needs fixing.

menu-inspect.png

Sorry, try to navigate developer tools but didn´t find the line, should I have to find specific file? and edit it?, thanks in advance

[ceford]

Try this in your user.css file:

Code: Select all

@media (min-width: 992px) {
  .container-header .mod-menu {
    flex-wrap: wrap;
  }  
}

You find the user.css file in System / Site Templates / Cassiopeia Details and Files / css

If it is not present click the New File button and create it.

Also, I recommend Title Case for menus rather than ALL CAPITALS - amongst other things, it takes up less space.