What I’m sharing below uses an example of a button block component to replace native navigation and allows you to organize tabs to be placed within a specific main tab as sub-tabs.
The following method is open to many possibilities for using components and styles beyond the example I provided, such as floating menus, involving rich text components, or custom components with your own style. Feel free to share your creative styles/designs in this thread to share with other community members.
Here’s how you do it:
1. Prepare 3 button block components.
Assign the class name ‘main-menu’ to the main tab, ‘sub-menu’ and ‘sub-menu2’ to the 2 sub-menu button block components. Each button is already given the corresponding “Go to Tab” action.
2. Hide the Glide native nav-tab.
/*Hide all nav - tabbar*/
#page-root .has-tab-bar > div, #page-root [data-testid="menu-left-button"]:not(:has(div:first-child.visible-icon)), #page-root:not(:has(.mobile-layer)) #nav-root > div > div > div {
display: none;
}
3. Copy the following CSS code so your main-menu can become active based on the selected tab.
/*Custom main-menu 1*/
#page-root:has(nav ul > li:nth-child(1) > .menu-item.active) .main-menu button:nth-child(1) {
background-color: var(--gv-w10A);
}
/*Custom main-menu 2*/
#page-root:has(nav ul > li:nth-child(2) > .menu-item.active) .main-menu button:nth-child(2) {
background-color: var(--gv-w10A);
}
/*Custom main-menu 3*/
#page-root:has(nav ul > li:nth-child(3) > .menu-item.active) .main-menu button:nth-child(3) {
background-color: var(--gv-w10A);
}
/*Remove Button default style*/
#page-root .main-menu .bordered {
background: transparent;
box-shadow: none;
}
Add the following code to make the main menu sticky at the top and set buttons to nowrap.
/*Style main-menu*/
#page-root #main-root > div> .main-menu {
position: sticky; /*Required for sticky at the top*/
top: 0;
background-color: var(--gv-accent);
padding: 8px;
margin-top: -1rem;
margin-bottom: 1rem;
z-index: 99999;
}
/*Nowrap All Button*/
#page-root .main-menu .button-box,
#page-root .sub-menu .button-box,
#page-root .sub-menu2 .button-box {
flex-wrap: nowrap;
}
4. CSS Code for sub-menu 1.
/*Custom sub-menu 4-6*/
#page-root:has(nav ul > li:nth-child(4) > .menu-item.active) .sub-menu button:nth-child(1),
#page-root:has(nav ul > li:nth-child(5) > .menu-item.active) .sub-menu button:nth-child(2),
#page-root:has(nav ul > li:nth-child(6) > .menu-item.active) .sub-menu button:nth-child(3) {
border-radius: 0;
border-bottom: 2px solid red;
background-color: rgba(255, 0, 0, 0.2);
}
/* Keep main-menu 1 active while sub-tabs 4-6 are active */
#page-root:has(nav ul > li:nth-child(n + 4):nth-child(-n + 6) > .menu-item.active) .main-menu button:nth-child(1) {
background-color: var(--gv-w10A);
}
/*Style Sub-menu 1*/
#page-root #main-root > div > .sub-menu {
position: sticky;
top: 55px;
padding: 8px;
margin-top: -1rem;
margin-bottom: 1rem;
background-color: #272727;
z-index: 99999;
}
5. CSS Code for sub-menu 2.
Since sub-menu 2 is located within the “more” menu, the :nth-child(n + 1) of Glide’s tab increases by 1.
/*Custom sub-menu 7-9 in Fly-out*/
#page-root:has(nav ul > li:nth-child(8) > .menu-item.active) .sub-menu2 button:nth-child(1),
#page-root:has(nav ul > li:nth-child(9) > .menu-item.active) .sub-menu2 button:nth-child(2),
#page-root:has(nav ul > li:nth-child(10) > .menu-item.active) .sub-menu2 button:nth-child(3) {
border-radius: 0;
border-bottom: 2px solid red;
background-color: rgba(255, 0, 0, 0.2);
}
/* Keep main-menu 2 active while sub-tabs 7-9 are active */
#page-root:has(nav ul > li:nth-child(n + 8):nth-child(-n + 10) > .menu-item.active) .main-menu button:nth-child(2) {
background-color: var(--gv-w10A);
}
/*Style Sub-menu 2*/
#page-root #main-root > div> .sub-menu2 {
position: sticky;
top: 55px;
padding: 8px;
margin-top: -1rem;
margin-bottom: 1rem;
z-index: 99999;
background-color: #272727;
}
