amberv98

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

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!

Hi @tuanphan, I've figured this one out. ☺️

@tuanphan I've tried this code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $(".header-title-logo a").attr("href", "https://atelierroger.eu");
});
</script>

Hi @tuanphan, I managed to make the last menu item a button. But I don't like the fact that it is underlined when you hover over it. Is there any way to remove that underline only at the last menu item?

Thanks in advance!

Hi @tuanphan, I also want to change the logo link to another link. I've tried your code, but it doesn't work. Don't know if I did something wrong. 

The webiste is made in 3 languages: Dutch, French and English.

You enter the website through this cover page: https://www.atelierroger.eu/
(I do notice that the url slug that I had entered '/cover' does not appear after the url.)

that will take you to the homepage, depending on the language: 
https://www.atelierroger.eu/nl/home
https://www.atelierroger.eu/fr/accueil
https://www.atelierroger.eu/en/home

Password: Scoby2311

Thanks in advance!

Hello @creedon! I don't know much about coding, but I would also like to have the button change according to the language. My website will be published in Dutch, French and English. Could you help me with this? The website is atelierroger.eu and the password is Scoby2311.