Jump to content

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

Recommended Posts

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!

Edited by amberv98
Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.thumb.png.232e3fdb4bac257b842e48ea334cc8e3.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.