7.1 Split Navigation script - nav items on right disappear or wrong color

6 hours ago, christined said:

 

I implemented footer injection script shared in this thread but am getting inconsistent results with nav showing on right side -- it is either hidden or in wrong color, and varies from page-to-page, whether or not I am logged in, and between Safari and Chrome. 
 

I currently have this in footer injection:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('.header-display-desktop nav.header-nav-list').clone().insertAfter('.header-actions.header-actions--right>.showOnMobile');
})
</script>
<style>
  .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+2) {display: none;}
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+3) {display: none;}
  .header-nav-item:nth-child(n+2) {
    margin-right: 4vw;
}
</style>

And these screenshots show the two nav items on right either missing or in black. (Interestingly, on the pages where the words News and Commissions aren't visible, I can still click that area and link to the page... words just don't show.)

The site is: angelaart.squarespace.com
pw: angela

I sincerely appreciate any advice anyone can share!
Christine

 

I find thé following code make that navigation on the right disappear

You can try the following code to overwrite it

.header-nav-item.header-nav-item--collection  a {
  opacity: 1;
  color: var(--solidHeaderNavigationColor);
}

Hope it can help