Making menu wider / centered / don't hide overflow in Vue Demo 7
I feel silly but can't seem to figure out how to make the menu icon area wider or at least not hide overflow (that's the actual problem to be honest). I have added text below the buttons and lined those up by applying a custom style and giving it flex-direction: column However, I am unable to make it show the complete menu text either by making the container wider or by not hiding overflow.
I would also like for the menu items to be centered. I couldn't figure that out without getting super hacky.
<a>https://snipboard.io/2ZMtKe.jpg</a>
Replies (4)
Oh actually I do also need to make it wider, or put the scrollbar somewhere else, because it's overlapping.
Hi,
Please try this code for the nav link element in the menu:
<a class="nav-link btn btn-icon flex-column btn-active-color-primary btn-color-gray-400 btn-active-light w-75px h-75px active" data-bs-toggle="tab" href="#kt_aside_nav_tab_projects"><i class="ki-duotone ki-element-11 fs-2x"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i><span class="fs-8 pt-3">Title
</span></a>The size of the button can be controlled with
w-75px h-75px size utility classes.Regards.
OH MY GOSH. THANK YOU SO MUCH. I can't believe how long I was struggling with this, putting in crazy hacks :P THANK YOU!!!!!!!!!!!! 
Hi ,
Great. Glad to help you out. If you need any further help please let us know.
All the best with your project!
Regards.
