Topic: Customization of Navigation on Side Nav

Tionne Lee pro asked 6 years ago


I am a pro user. I am using
ng-uikit-pro-standard.
I would like to know how to customize the links of side navigation.
I would like to increase font size.
Kindly point me to your documentation that explains in general how to customize your components.

Arkadiusz Idzikowski staff answered 6 years ago


You can find new syntax for sidenav here: Sidenav example Double navigation

Tionne Lee pro answered 6 years ago


It was not my intention to use old syntax. I copied from one of your templates. Please, provide link to template that uses the new syntax.

Arkadiusz Idzikowski staff answered 6 years ago


Dear Tionne Lee, You use old syntax for mdb-accordion, which still works, but you need to adjust those styles accordingly (mdb-item-head instead of mdb-accordion-item-head and mdb-item-body instead of mdb-accordion-item-body). Regards, Arek

Tionne Lee pro answered 6 years ago


Please, I would like quick response as w are working under tight schedule.

Tionne Lee pro answered 6 years ago


Thanks for your response. Unfortunately, it did not work. I have tried to attach a screenshot of my Ui, unfortunately, the add image button on your text editor is not working. And it appears complicated for a simple task of adding a screenshot. Find below exerpts of my code.
<li>
<ulclass="collapsible collapsible-accordion">
<mdb-squeezebox[multiple]="false"aria-multiselectable="false">
<mdb-itemclass="no-collase">
<mdb-item-headmdbWavesEffectrouterLink="alerts">
<iclass="fa fa-bell-o"></i> Dashboard
</mdb-item-head>
<mdb-item-body></mdb-item-body>
</mdb-item>
<mdb-item>
<mdb-item-headmdbWavesEffect>
<iclass="fa fa-tachometer"></i> Personal
</mdb-item-head>
<mdb-item-body>
<ul>
<li>
<arouterLink="my-data"routerLinkActive="active"class="waves-effect"mdbWavesEffect>My Data</a>
</li>
<li>
<arouterLink="dashboards/v2"routerLinkActive="active"class="waves-effect"mdbWavesEffect>My Team</a>
</li>
</ul>
</mdb-item-body>
</mdb-item>
Also, note that the above is part of a component in an angular library.      

Arkadiusz Idzikowski staff answered 6 years ago


Hello, Thank you for the confirmation. If you need to modify font-size of main side-nav links, you can add those styles to your styles.scss file:
.side-nav mdb-accordion-item-head h5 {

font-size: 18px!important;

}
Nested links can be modified with:
.side-nav mdb-accordion-item-body a {

font-size: 20px!important;

}
Regards,
Arek

Arkadiusz Idzikowski staff answered 6 years ago


Dear Tyrin-J OSIMEN, Sidenav is a premium component, and according to our system, you use MDB Free version. Please, provide us a number of your order or registered email to confirm your access to MDB Pro components and premium support. You can send it to me on: a.idzikowski@mdbootstrap.com Regards, Arek

Tionne Lee pro commented 6 years ago

I have sent the details to your email address.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No