does anyone nows how to make tabs on the desktop tab bar menu to be grouped and showed as a dropdown using CSS?
It would look like this:
Instead of this:
Is this worth a request in the library @tuzin @Eric_Penn @Lucas_Pires ? I think we won’t achieve the dropdown, but wonder if we can insert lines here and there to make it cleaner.
2 Likes
I’ll play around with it but I think Glide plans to add this natively…. and soon 
1 Like
Dropdowns are possible, but they will be confusing because in order to show submenu items you would have to actually go to the top-level menu item, meaning the content on the page will change. However, I have an alternative (see the image below). It’s compact, works on both mobile and desktop, and section headers aren’t clickable. The only trade off is that the first tab which is a header is opened by default and you have to make it sort of a main or welcome screen.
3 Likes
I will post the code for this to CSS Library today
2 Likes
I’ve posted this to CSS Library in case anyone needs this
3 Likes
Here’s the direct link.
2 Likes
MOBILE
DESKTOP:
/*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;
}
5 Likes
Because I was on holiday, I was playing on the computer for fun.
After trying through CSS, it turns out I managed to collapse and expand the menu using only CSS. The only drawback is that the same button is not toggleable, so collapsing can only occur when another button is clicked. 
That’s ridiculuously genius. Can you explain more on “when another button is clicked”? Do you have that button on the screen or somewhere else?
1 Like
There are no hidden buttons/components. Are you still thinking about the hint component?
Each active button has an additional class as .active or .selected. Therefore, you can create simple conditionals like :not(.active) or :not(.selected).
1 Like
I made two reading errors in text today, maybe due to lack of sleep.
I’m sorry, the button I meant is the items menu button outside the expand items group.
It’s amazing! Thank you very much for this. I was about to leave Glide because of this hahah.
I just couldn’t quite figure out how to use it (I am very newbie with css). What should I do to do so? On other types of elements I could do it. I just didn’t manage to use on the nav bar.
Thank you very much
I always consider the way out is not relying on CSS, especially in this case. I’m just testing it.
Which one do you want?
For your CSS code, you can copy and paste it into the section: Settings > Appearance > Custom CSS, and change :nth-child(n+2):nth-child(-n+4) according to the range of your menu order.
I just don’t know how to do the dropdown. Just copying and pasting didn’t work. Am I doing this right?
I haven’t provided the code for it yet, because this is just for desktop. My eyes are also tired from the small window of custom CSS. You try it first, maybe there’s something mixed up with the others that I haven’t checked yet.
Let me know if this works.
/*Desktop*/
/*Active*/
#page-root nav > ul > li:nth-child(4).active::after {
content: '';
width: 10px;
height: 10px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="Bold" viewBox="0 0 24 24" stroke-width="3" stroke="none" fill="white" stroke-linecap="round" stroke-linejoin="round"><path d="M12,19.5a2.3,2.3,0,0,1-1.729-.78L.46,7.568A1.847,1.847,0,0,1,3.233,5.129l8.579,9.752a.25.25,0,0,0,.376,0l8.579-9.752A1.847,1.847,0,1,1,23.54,7.568L13.732,18.716A2.31,2.31,0,0,1,12,19.5Z"></path></svg>');
background-repeat: no-repeat;
background-size: contain;
margin-left: auto;
margin-right: 0px;
}
/*Not Active*/
#page-root nav > ul > li:nth-child(4):not(.active)::after {
content: '';
width: 10px;
height: 10px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="Bold" viewBox="0 0 24 24" stroke-width="3" stroke="none" fill="white" stroke-linecap="round" stroke-linejoin="round"><path d="M12,4.5a2.3,2.3,0,0,1,1.729.78l9.811,11.15a1.847,1.847,0,1,1-2.773,2.439L12.188,9.119a.25.25,0,0,0-.376,0L3.233,18.871A1.847,1.847,0,1,1,.46,16.432L10.268,5.284A2.31,2.31,0,0,1,12,4.5Z"></path></svg>');
background-repeat: no-repeat;
background-size: contain;
margin-left: auto;
margin-right: 0px;
}
/* Collapse menu is not 4-7 active */
/* Hide menu 6-8 by default */
#page-root nav > ul > li:nth-child(n+5):nth-child(-n+7).active {
display: block;
}
/* Collapse menu is not 5-8 active */
#page-root nav > ul > li:nth-child(n+1):nth-child(-n+3).active ~ li:nth-child(n+5),
#page-root nav > ul > li:nth-child(n+8).active ~ li:nth-child(n+5) {
display: none;
}
/*Indent*/
#page-root nav > ul > li:nth-child(n+5):nth-child(-n+7).menu-item {
margin-left:30px;
}
/*BORDER*/
#page-root nav > ul > li:nth-child(n+5):nth-child(-n+7).menu-item::before {
content: '';
position: absolute;
margin-top: 0px;
border-left: 1px solid gray;
height: 40px;
margin-left:-12px;
}
Has this been expanded upon, have you figured out the code
The code above only manipulates the style by indenting the side menu based on whether the “active” condition is met, determining whether to show or hide other menus. You can try it directly; it might still work.
As a consideration, you may want to try this method with your own custom menu. This approach offers more control:
I think This Only Applies To A Top Menu, When Im Really Trying To Sub Group The Side Menu Within A Dsktop View, The Code Provided Earlier Does Not Work ANymore
What style are you trying to achieve? The selectors in the code above need to be adjusted because the HTML structure in the DOM has changed. Specifically, the .active class is now applied to the button instead of the <li> element.
I’m currently unable to test with custom CSS. How can I assist you?
1 Like