[ad_1]
Asked
Viewed
2 times
I’m using WordPress. I’d like my current_page_item (which is assigned to li by wordpress) to be like the a:hover, so the text in yellow and the border in yellow when current page item is active. I think a add css at the right place but something is wrong, the border is added but not the color on the text and the padding breaks the alignment… Please can someone help me ?
.container {
width: 100%;
max-width: 1550px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
margin: 0 auto;
@media screen and (max-width: 1183px) {
align-items: flex-start;
flex-wrap: wrap;
padding: 15px 30px;
}
}
.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
.header-color {
background-color: rgba($color: $darkGrey, $alpha: 0.7);
@media screen and (max-width: 1183px) {
background-color: $darkGrey;
}
.logo__wrapper {
@media screen and (max-width: 359px) {
flex: 70%;
}
@media screen and (min-width: 360px) and (max-width: 1183px) {
flex: 80%;
}
.link__logo {
text-decoration: none;
display: flex;
align-items: center;
max-width: 210px;
.header__logo__ctn {
padding-right: 5px;
.header__logo {
height: 56px;
}
}
.header__title {
color: #ffffff;
font-family: $calvous;
}
}
}
.nav-primary {
display: flex;
justify-content: space-between;
align-items: center;
@media screen and (max-width: 1183px) {
flex-direction: column;
justify-content: flex-start;
// height: 100vh;
}
.nav {
display: flex;
justify-content: space-between;
letter-spacing: 2px;
list-style-type: none;
@media screen and (max-width: 1183px) {
flex-direction: column;
}
.current_page_item {
padding: 5px 25px;
border: 1px solid $yellow;
color: $yellow;
}
.menu-item {
text-decoration: none;
@media screen and (max-width: 1183px) {
display: flex;
padding: 8px 0;
}
&::after {
content: url("../../images/assets/svg/bckg-links.png");
@media screen and (max-width: 1183px) {
content: none;
}
}
.presentation {
@media screen and (max-width: 1183px) {
padding: 18px 25px;
}
}
a {
padding: 5px 25px;
color: #ffffff;
font-family: $ubuntuLight;
font-size: 15px;
text-transform: uppercase;
text-decoration: none;
border: 1px solid transparent;
&:hover {
border-color: #ceae60;
color: #ceae60;
}
@media screen and (max-width: 1183px) {
font-size: 22px;
padding: 15px 5px;
}
}
}
.menu-item-41 {
&::after {
content: none;
}
}
}
.social__wrapper__ctn {
.social__wrapper {
list-style-type: none;
padding-left: 1em;
.social__item {
@media screen and (max-width: 1183px) {
padding: 10px 0;
}
.social__link {
text-decoration: none;
color: $yellow;
font-family: $ubuntuLight;
&:hover {
border-color: $white;
}
span {
display: none;
@media screen and (max-width: 1183px) {
display: inline;
padding-right: 10px;
}
}
i {
border: 1px solid $yellow;
border-radius: 50%;
width: 25px;
height: 25px;
color: $yellow;
font-size: 15px;
padding: 5px 6.2px;
&:hover {
color: $white;
border-color: $white;
}
}
}
}
}
}
}
default
[ad_2]