amberv98 Posted February 28, 2022 Share Posted February 28, 2022 (edited) 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 February 28, 2022 by amberv98 Link to comment
Beyondspace Posted March 1, 2022 Share Posted March 1, 2022 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 pluginIf 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
Beyondspace Posted March 1, 2022 Share Posted March 1, 2022 My testing 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 pluginIf 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
amberv98 Posted March 2, 2022 Author Share Posted March 2, 2022 Thank you so much! That worked like a charm 😁. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment