This article explains why the oxygen menu items does not wrap it's children into a new row when they are overflowing the screen. To understand this article you will require a basic understanding on flex-box. You can watch this video by Kevin Powell or read about flexbox on the MDN Docs.
The 'issue' with the native menu in oxygen
The Oxygen menu's ol element is set up as a flex-box, but does not contain a 'flex-wrap:wrap', which allows flex elements that would horizontally overflow
- Create a stylesheet in Oxygen Builder Add this code to your style sheet:
/*Target ul selector of the relevant menu class swap .menu--footer for relevant menu class or #selector*/
.menu--footer ul {
flex-wrap:wrap;
}
/*Target li selector withing the list targeted above swap .menu--footer for relevant menu class or #selector*/
.menu--footer ul li{
width: fit-content !important;
}- Apply the class '.menu--footer' to your menu element in the Oxygen editor
/*Replace .menu with your menu class*/
.menu--footer ul {
flex-wrap:wrap;
}
.menu--footer ul li{
width: fit-content !important;
}
