Customization of Navigation on Side Nav

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.

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

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

Add comment

Tionne Lee pro answered 6 years ago

0 0 Best answer

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.

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

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

Add comment

Tionne Lee pro answered 6 years ago

0 0 Best answer

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

Add comment

Tionne Lee pro answered 6 years ago

0 0 Best answer

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.
<div>
<div><li></div>
<div><ulclass="collapsible collapsible-accordion"></div>
<div><mdb-squeezebox[multiple]="false"aria-multiselectable="false"></div>
<div><mdb-itemclass="no-collase"></div>
<div><mdb-item-headmdbWavesEffectrouterLink="alerts"></div>
<div><iclass="fa fa-bell-o"></i> Dashboard</div>
<div></mdb-item-head></div>
<div><mdb-item-body></mdb-item-body></div>
<div></mdb-item></div>
<div><mdb-item></div>
<div><mdb-item-headmdbWavesEffect></div>
<div><iclass="fa fa-tachometer"></i> Personal</div>
<div></mdb-item-head></div>
<div><mdb-item-body></div>
<div><ul></div>
<div><li></div>
<div><arouterLink="my-data"routerLinkActive="active"class="waves-effect"mdbWavesEffect>My Data</a></div>
<div></li></div>
<div><li></div>
<div><arouterLink="dashboards/v2"routerLinkActive="active"class="waves-effect"mdbWavesEffect>My Team</a></div>
<div></li></div>
<div></ul></div>
<div></mdb-item-body></div>
<div></mdb-item></div>
</div>
Also, note that the above is part of a component in an angular library.

Please insert min. 20 characters.

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.

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

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.

Add comment

Write

Create snippet

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

Tionne Lee

Pro User 35Support score
1Questions 3Answers 0Snippets