Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

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>


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)


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!!!!!!!!!!!! happy



Hi happy,

Great. Glad to help you out. If you need any further help please let us know.
All the best with your project!

Regards.


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.

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 actually I do also need to make it wider, or put the scrollbar somewhere else, because it's overlapping.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(