Как исправить что бы отображалось вот так.? 

 

И подскажите как она сама по себе называется 

Edited 20 февраля, 201510 yr by HooLIGUN

Это называется "breadcrumb / Навигационная цепочка / Хлебные крошки"

 

Но не понял, что исправить. У вас в стилях ничего такого не предусмотрено. Т.е. не "исправить", а "сделать с нуля" ?

Правьте стили CSS в таком случае. ID и классы элементов известны.

 

Причём, "хлебные крошки" со стрелочками (как у вас на рисунке) можно оформить при помощи картинок или на чистом CSS. Пример такого оформления можете увидеть на своем сайте в разделе "регистрация":

Возьмите принцип оттуда.

 

ПС: Единственное, что надо будет ещё сделать, это удалить стрелочку-разделитель между ссылками, чтобы они не мешались:

Для этого в GlobalTemplate удалить в двух местах (в верхних и нижних хлебных крошках):

<span class='nav_sep'>{parse replacement="f_nav_sep"}</span>

НО ЛУЧШЕ в CSS прописать:

.breadcrumb li .nav_sep { display: none; }

Edited 20 февраля, 201510 yr by Viktar83