Is it possible by standard Wordpress functions to keep track of which page the user is on and add the necessary classes to the necessary elements depending on the current location. I will give an example -
.bl_groupButtons { width: 100%; font-size: 0; text-align: center } .bl_groupButtons__item { display: inline-block; position: relative; width: 33.3%; height: 80px; line-height: 80px; color: #fff; font-family: "Open Sans - Semibold"; font-size: 16px; text-transform: uppercase; letter-spacing: .2px; cursor: pointer; box-sizing: border-box; box-shadow: 0 17px 24px rgba(0, 0, 0, .17), inset 0 1px 3px rgba(255, 255, 255, .04); background-color: #232c35; background-image: linear-gradient(to top, #272c32 0%, #363f4a 100%); outline-color: #ffb504 } .bl_groupButtons__item:nth-child(2) { border-left: 1px solid #000; border-right: 1px solid #000 } .bl_groupButtons__item:focus, .bl_groupButtons__item:hover { color: #ffb504; transition: .2s all; outline-color: #ffb504 } .bl_groupButtons__item.active { background-color: #ffb504; background-image: linear-gradient(to top, rgba(0, 0, 0, .1) 0%, rgba(255, 255, 255, .55) 100%) } .bl_groupButtons__item.active:hover { color: #000; transition: .2s all } <div class="bl_groupButtons"> <a class="bl_groupButtons__item active" href="/">Игровые автоматы</a> <a class="bl_groupButtons__item" href="/bonuses">Бездипозитные бонусы</a> <a class="bl_groupButtons__item" href="/news">Новости</a> </div> If the user is on the bonus pages (example.com/bonuses), then only the second link is assigned the active class. If the news page (example.com/news), then the third link. In all other cases, the active class is assigned to the first link. (Technically, I can track this with JS on the client side, but something tells me that there is a better option).
