how to put break point for TLN tab names

[Former Member]

Hi Experts,

Please advice how to TLN names to display into two or three lines.

Eg: I have a role with 2 tabs in the First Level Navigation, tab names are appearing in a single line.

Say..  Detailed Information     Administration and Development

I want them to display in First level navigation as below.

Say... Detailed                    Adminstration

         Information                       and

                                         Development

Please advice.

Thank you

Ambica.

[Former Member · Accepted solution]

Hi ambika,

please find below thread. It might helps to solve your issue:

Regards,

[Former Member · Accepted solution]

Hi Krunal/Rohit,

Thank you for the valuable inputs.

Issue resolved with after adding "white-space:normal;" to the font size in theme editor.

Ambica

[Former Member · Accepted solution]

Hi Krunal,

Now the Names are aligning from Left.

Say.. Administration

        and

        Development

Can you please tell me how to make it to align center.

like ....Administration

                and

           Development

Thank you

Ambica

[Former Member · Accepted solution]

Hi Ambica,

Please try with Rohit's suggestion for the same i.e. Change CSS file property Text-Align " center" and revert.

Regards,

Krunal

[Former Member · Accepted solution]

Hi Krunal,

Tried it...worked...

TY

Ambica

[Former Member · Accepted solution]

Hi Ambika,

If your issues are resolved then please close this thread.

Regards,

[rohit_singhal]

Hi Ambica,

Have you tried changing the style of the tabs?

Your requirement should be achievable using CSS.

Best Regards,

Rohit Singhal

[Former Member]

Hi Rohit,

Thank you for the reply.

I have tried only through theme editor. but i did not find a way there.

Can you please explain how to acheive this through CSS.

I have downloaded the light TLN par file, but i did not find any CSS files there.

Thank you

Ambica

[rohit_singhal]

Hi Ambica,

You would have to create a custom CSS, and include it when the TLN component is called.

Changes that you need to do:

1. Find out if there is any common class for all Level 1 tabs in TLN. (Let's assume class name is: level1

2. Then set the CSS as:

.level1{

width: 100px;

text-align: center;

word-wrap: normal;

}

Here the text align will set the text in the middle of the tab. By setting a fixed value of width and then using word-wrap the required effect can be achieved.

Also you might face an issue, where the style changes don't get reflected; this is because there could be some other CSS (inline/external) which is overwriting it. To overcome this, you can add !important tag after each style.

Do let me know in case of any concerns.

Best Regards,

Rohit Singhal