Sidebar menu items wrap issue

[projectorchid]

Is there a way not to wrap the menu item text under the icon and display the badge on first line itself?

[xidedix]

hi @projectorchid
let's play around with styles, sth like:

 <li class="nav-item">
  <a class="nav-link d-flex" href="after.html">
    <i class="nav-icon fa fa-group align-self-center"></i>After school program
    <span class="badge badge-info align-self-start">337</span>
  </a>
</li>

[projectorchid]

Thanks @xidedix
These menu items are dynamically added from database. The style fix works for the long menu links. But for shorter links like "Un Grouped" or "My First Group" the badge displays near the text, not right aligned.

[xidedix]

what about:

<span class="flex-grow-1">My First Group</span>

to make it right for sidebar minimized add:

.sidebar-minimized .sidebar .nav-link {
    display: block !important;
}

[dimitor115]

I've got a similar issue. If the text of the nav-link is too long, it wraps under the icon. It looks quite bad.

My solution, is to chage nav-link display to flex and fix nav-icon padding. If you have better ideas, let me know!

.sidebar .nav-dropdown-items .nav-item .nav-link { 
     display: flex;
    .nav-icon { 
        padding-top:4px ;
     }
 }

After that, it looks much nicer!

[lichbx1]

I've got a similar issue. If the text of the nav-link is too long, it wraps under the icon. It looks quite bad.

My solution, is to chage nav-link display to flex and fix nav-icon padding. If you have better ideas, let me know!

.sidebar .nav-dropdown-items .nav-item .nav-link { 
     display: flex;
    .nav-icon { 
        padding-top:4px ;
     }
 }

After that, it looks much nicer!

thank you.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.