How do you change the color of the last navigation item on 1 page?

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!

On 2/28/2022 at 4:05 PM, amberv98 said:

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!

Adding to Home > Design > Custom Css for the page  https://www.atelierroger.eu/en/our-story

#collection-620e5453e9ceb04fce37fa40 .header-nav-list .header-nav-item:last-child a {
  background: #fff;
  box-sizing: border-box;
  color: #BF9765 !important;
}
#collection-620e5453e9ceb04fce37fa40 .header-nav-list .header-nav-item:last-child a:hover {
  background: #BF9765;
  color: #fff !important;
  outline: 1px solid #fff;
}

You can copy into new one to set style for another page

Hope it can help you

My testing

Thank you so much! That worked like a charm 😁.