Customizing TabMenu or TabView in PrimeNg in Angular

Question

Description:

I'm currently working on a project where I need to recreate a widget like TabMenu/TabView in PrimeNg, but I'm having trouble having diffrent routerlinks on each button and customizing it to be like the image or just more dynamic.

the widget that I want to create:

Details:

Framework/Library: Angular, PrimeNg Problem: I want to customize the TabMenu/TabView from primeng What I want: I want it t take 90% of view width and for it to be centerd and the width of each tab to be like the image. Current behavior: Describe what's currently happening when you apply your customization attempts.

HTML:

<div class="container "> 
   <p-tabMenu [model]="items"> 
</p-tabMenu> </div>

CSS: I tried many ways like trying to edit the container or editing these tags from prime ng but I just cant edit it

Answer 1

my problem was that I hade it inside:

<div class="container "> </div>

the solutin is to remove the parent div: HTML:

<p-tabMenu [model]="items" [activeItem]="activeItem"  (activeItemChange)="navigate($event)" >

CSS:

.p-tabmenu {
  border: none;
}
.p-tabmenu-nav {
  border: 1px white solid;
  margin-left: 5%;
  margin-right: 5%;
}
.p-tabmenuitem {
  width: 50%;
}
.p-menuitem-link {
  width: 100%;
  align-content: center;
  text-align: center;
}
.p-menuitem-link:active ,.p-menuitem-link:focus{
  width: 100%;
  align-content: center;
  text-align: center;
  border-bottom: 4px #127ae5 solid;
  border-radius: 5px;
}
.p-menuitem-text {
  position: absolute;
  right: 0;
  left: 0;
  text-align: center;
  color: #127ae5;
}

THE RESULT: