.ngparashopnavigator { display: block; list-style: none; overflow: hidden; padding: 0; margin: 20px 0 0 0; } .ngparashopnavigator::after { content: ""; clear: both; display: table; } .ngparashopnavigator>li { display: block; float: left; height: 40px; position: relative; box-sizing: border-box; } .ngparashopnavigator3cols>li { width: calc(33.33% + 16px); } .ngparashopnavigator3cols>li:last-child { width: calc(33.33% - 46px); } .ngparashopnavigator3cols>li:first-child { width: calc(33.33% + 30px); } .ngparashopnavigator4cols>li { width: calc(25% + 10px); } .ngparashopnavigator4cols>li:last-child { width: calc(25% - 45px); } .ngparashopnavigator4cols>li:first-child { width: calc(25% + 25px); } .ngparashopnavigator5cols>li { width: calc(20% + 8px); } .ngparashopnavigator5cols>li:first-child { width: calc(20% + 20px); } .ngparashopnavigator5cols>li:last-child { width: calc(20% - 44px); } .ngparashopnavigator>li::after { position: absolute; top: 50%; left: -40px; content: " "; height: 0; width: 0; pointer-events: none; border: solid #d3d3d3; border-left-color: transparent; border-width: 20px; margin-top: -20px; } .ngparashopnavigator>li.ngparashopnavigatorcurrent::after { position: absolute; top: 50%; left: -40px; content: " "; height: 0; width: 0; pointer-events: none; border: solid #5a5a5a; border-left-color: transparent; border-width: 20px; margin-top: -20px; } .ngparashopnavigator>li>span { width: calc(100% - 45px); background-color: #d3d3d3; color: #5a5a5a; height: 40px; line-height: 20px; font-size: 14px; padding: 10px 20px 10px 0; display: block; box-sizing: border-box; position: relative; text-align: center; -webkit-text-size-adjust:none; text-size-adjust:none; } .ngparashopnavigator>li.ngparashopnavigatorcurrent>span { background-color: #5a5a5a; color: #ffffff; } .ngparashopnavigator>li:first-child>span { padding: 10px 10px 10px 10px; } .ngparashopnavigator>li>span::after { position: absolute; top: 50%; left: 100%; content: " "; height: 0; width: 0; pointer-events: none; border: solid transparent; border-left-color: #d3d3d3; border-width: 20px; margin-top: -20px; } .ngparashopnavigator>li.ngparashopnavigatorcurrent>span::after { position: absolute; top: 50%; left: 100%; content: " "; height: 0; width: 0; pointer-events: none; border: solid transparent; border-left-color: #5a5a5a; border-width: 20px; margin-top: -20px; } .ngparashopnavigator>li:last-child>span::after { border-width: 0; } .ngparashopnavigator>li:last-child>span { width: 100%; } @media (max-width: 767px) { .sqr .ngparashopnavigator>li>span>span:last-child { display: none; } } @media (min-width: 768px) { .sqr .ngparashopnavigator>li>span>span:first-child { display: none; } }