Styling the main menu (feature available since 3.19.0)

[dtrucs]

The default requirements to use this feature are :

• Geotrek Rando 3.19.0
• connected to a Geotrek Admin 2.104.0

Since Geotrek Admin 2.104.0, you can define complex menu items.

If a submenu contains fewer than 5 items, or if none of the items in a submenu contains an image, the drop-down menu takes on the appearance of a "small" menu, if not the "large" menu.

Small Menu

It looks just like the old one (i.e. before version 3.19.0) and you shouldn't have to override the style. But you can always use the .custo-menu-* classes to do so.

Large Menu

To manage this complex menu, styles and elements are added to play with customization.
Please note that links in submenus are sorted into 2 groups: links without images (custo-menu-group--without-imgs) and links with images (.custo-menu-group--with-imgs).

Default style

Example to balance photos

If you have more photos to display and want to balance the structure, you can for example add these selectors to your customization/theme/style.css.

.custo-menu-sub-menu {
  align-items: start;
}
.custo-menu-sub-menu .custo-menu-group--with-imgs {
  flex-direction: row;
  flex-wrap: wrap;
  width: 430px;
}
.custo-menu-sub-menu .custo-menu-group--with-imgs a {
  flex-basis: 200px;
}

Example for submenus taking up the entire width of the screen

.custo-menu-item-wrapper {
  position: static;
}

.custo-menu-sub-menu {
  top: 100%;
  padding: 1rem 2rem;
}

/* Display links as row */
.custo-menu-group {
  flex-direction: row;
}

There may be other use cases, you can use this ticket as a question/answer.

[camillemonchicourt]

Intégré dans la version 3.19 (nécessitant Geotrek-admin 2.104+) basée sur le nouveau système d'éléments de menu, complétant les pages statiques.
Documenté côté Geotrek-admin sur https://geotrek.readthedocs.io/en/latest/usage/static-pages.html