Site URL: https://www.atelierroger.eu/
Hi, I have encountered some problems with personalizing the navigation bar. My site is trilingual and since it is not possible to translate the button in the navigation bar, I used the code below to turn the last active item in the navigation bar into a button.
Website: atelierroger.eu
Login: Scoby2311
Now, I would like to change the colors of that button on some pages.
On this page: https://www.atelierroger.eu/en/our-story I would like to have the button in white with beige text and as hover white text with a white border.
On this page: https://www.atelierroger.eu/en/in-the-spotlight I would like to keep the button in orange but the text should be in white.
On this page: https://www.atelierroger.eu/en/get-in-touch I would like to have the button in orange with white text and at the hover reversed. Basically the way it is set with the other ones, but for some reason something is happening wrong here.
//Last navigation item --> button//
.header-nav-list .header-nav-item:last-child a {
color: #F27F1B;
border-color: #F27F1B;
background: #F27F1B;
font-weight: 700 !important;
border-width: 0px;
border-style: solid;
border-radius: 30px;
display: inline-block;
-webkit-font-smoothing: antialiased;
line-height: normal;
padding: 1rem 1.5rem;
-webkit-transition: 0.1s background-color linear, 0.1s color linear;
-moz-transition: 0.1s background-color linear, 0.1s color linear;
-o-transition: 0.1s background-color linear, 0.1s color linear;
transition: 0.1s background-color linear, 0.1s color linear;
}
.header-nav-list .header-nav-item:last-child a:hover {
background: #ffffff;
border-color: #ffffff;
color: #F27F1B;
}
.header-nav-list {
align-items: center;
}
.tweak-global-animations-animation-type-flex .header-nav-list .header-nav-item:last-child:not( .header-nav-item--folder ) a::after {
all : unset;
}
Hopefully someone can help me with this.
Thanks in advance!