How to make toggled navbar's shells smaller? or narrower?

when menu expands apeears with very wide shells and the names are in the left side. I would like to be on the right side and the shells to have only the length to fit the words…

I cannot find what classes to use in CSS or what properties…
width, text-align dont work…

Is this what you are looking for pen?

This is the extra CSS:

.solution-collapse {
  text-align: right;

.solution-collapse-list {
  display: inline-block; 

.solution-collapse-list li {
  text-align: left;

In a nutshell I change the ul element with the menu items to an inline-block. This way it will be only as wide as the containing elements. Since its now considered also an inline element it can be aligned with text-align applied to its parent element. Afterwards I just make sure to reset text-alight for its children elements.

Class names aren’t pretty but you can change them.

1 Like

Yes! This is exactly what I was looking for! Thank you so much @nr-mihaylov! :clap:
:+1: :raised_hands: