How to Customize the Menu Layout in the Solo Theme Using CSS Grid for a Single-Column Display and Retrieve the Machine Name for a Menu

Hello,

I'm not sure what's in the screenshot solo-2.PNG. As for solo-1.PNG, it appears to be a menu. If it is indeed a menu, it seems to be using the default menu template. To modify it to resemble the olivo-1.PNG, you can use the following method

#page-wrapper .you-should-get-your-menu-name-here {
  display: grid;
  grid-template-columns: 1fr;
}

Best wishes,
Alaa

Good afternoon. solo-1.PNG is a menu, you are right. solo-2.PNG is the IMCE dialog box when inserting a photo (file) in the visual editor.

Hello,
You can use insert this code in the sub-theme or in css injections under theme settings.

.imce-item {display:block!important;}

Best wishes,
Alaa

Hello. Can you tell me which theme file needs to be changed?

#page-wrapper .you-should-get-your-menu-name-here {
display: grid;
grid-template-columns: 1fr;
}

Hello,

For any menu you create in Drupal, a menu name is attached to the UL element.
To find the machine name for a menu, log in as an admin and navigate to your-site.com/admin/structure/menu. This page lists all the menus in the system. Click "edit" on the menu you need, and you will see the machine name displayed to the right of the title field (e.g., "Machine name: your-menu-name"). Copy this machine name and prepend it with "navigation__menubar-" so your full menu name will be "navigation__menubar-your-menu-name".

#page-wrapper ul.navigation__menubar-your-menu-name {
  display: grid;
  grid-template-columns: 1fr;
}

Best wishes,
Alaa

Alaa, thank you very much. Everything worked out.

You're welcome! I'm glad everything worked out.

Automatically closed - issue fixed for 2 weeks with no activity.