# Group tabs on desktop menu tab bar using CSS

**URL:** <https://community.glideapps.com/t/group-tabs-on-desktop-menu-tab-bar-using-css/72798>\
**Category:** Ask for Help\
**Created:** [April 22, 2024, 6:47pm UTC](https://community.glideapps.com/t/group-tabs-on-desktop-menu-tab-bar-using-css/72798 "2024-04-22T18:47:40Z")\
**Posts on this page:** 1\
**Showing post:** 8

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 5, 2024, 7:24am UTC](https://community.glideapps.com/t/group-tabs-on-desktop-menu-tab-bar-using-css/72798/8 "2024-05-05T07:24:17Z")

</div>

MOBILE

 ![Screenshot 2024-05-05 at 14.22.11](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/4/54c91b9d3a864855cb94832b8774b0c5084efa3c.png)

DESKTOP:  
 ![Screenshot 2024-05-05 at 14.21.49](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/1/713f111276f618d32476a53c1739b2716f4a8651.png)

```auto
/*NAVIGATION*/
#page-root nav > ul > li:nth-child(n+6):nth-child(-n+8).menu-item {
margin-left:10px;
}
/*Mobile*/
#page-root [aria-label="Side Navigation"] > ul > li:nth-child(n+2):nth-child(-n+4){
margin-left:10px;
}
#page-root nav > ul > li:nth-child(n+6):nth-child(-n+8).active.menu-item::before {
content: '◉';
color: red;
}
/*Mobile*/
#page-root [aria-label="Side Navigation"] > ul > li:nth-child(n+2):nth-child(-n+4).selected > button > div::before {
    content: '◉';
    color: red;
    padding-right:5px;
}
#page-root nav > ul > li:nth-child(n+6):nth-child(-n+8).menu-item::before {
content: '○';
}
/*Mobile*/
#page-root [aria-label="Side Navigation"] > ul > li:nth-child(n+2):nth-child(-n+4) > button > div::before {
    content: '○';
    padding-right:5px;
}
#page-root nav > ul > li:nth-child(n+6):nth-child(-n+7).menu-item::after {
    content: '';
    position: absolute;
    margin-top:38px;
    border-left: 2px solid gray;
    height: 30px;
    margin-left:5px;
}
/*Mobile*/
#page-root [aria-label="Side Navigation"] > ul > li:nth-child(n+2):nth-child(-n+3) > button > div::after {
    content: '';
    position: absolute;
    margin-top: 53px;
    border-left: 2px solid gray;
    height: 45px;
    margin-left:5px;
}

```

---

_[View the full topic](https://community.glideapps.com/t/group-tabs-on-desktop-menu-tab-bar-using-css/72798)._