How can I add different background images to custom navigation buttons?

Site URL: https://garlic-vanilla-9jsw.squarespace.com/config/

I used the following code I found to create a second navigation button, to switch from English and Spanish on the fly. I'd like to use flags instead of abbreviations but I'm not sure what to do now that I have a second button and it uses such a long string of code, don't know if I have to inject some code in here or in a new string. I hope someone can help, thanks!

/*

  begin add buttons to header
  
  Version       : 0.6d0
  
  SS Version    : 7.1
  
  Dependancies  : LESS
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  @gap : 0.5rem; // space between buttons
  
  /* direction-order controls whether buttons will be oriented in a row or
     column and if they will be in normal or reversed order. the first argument
     can be row or column, the second argument can be normal or reverse */
  
  .direction-order ( row, normal );
  
  // do not change anything below, there be the borg here
  
  .header .header-actions-action--cta, .header-menu-cta {
  
    display : -webkit-box;
    display : -ms-flexbox;
    display : flex;
    
    -webkit-box-orient : @d3;
    -webkit-box-direction : @d2;
    -ms-flex-direction : @d1;
    flex-direction : @d1;
    
    grid-gap : @gap;
    gap : @gap;
    
    text-align : center;
    
    }
    
  .header-menu-cta {
  
    justify-content : center;
    margin : auto;
    margin-bottom : calc( @gap * 1.25 );
    
    }
    
  .header-menu-cta a {
  
    margin : 0;
    
    }
    
  @media only screen and ( pointer : coarse ) and ( max-width : 1024px ),
    screen and ( max-width : 799px ) {
    
    .header .header-actions-action--cta {
    
      display : none;
      
      }
    }
    
   // direction row, normal
   
  .direction-order ( @d, @o ) when ( @d = row ) and ( @o = normal ) {
  
    @d1 : row;
    @d2 : normal;
    @d3 : horizontal;
    
    }
    
   // direction row, reverse
   
  .direction-order ( @d, @o ) when ( @d = row ) and ( @o = reverse ) {
  
    @d1 : row-reverse;
    @d2 : reverse;
    @d3 : horizontal;
    
    }
    
   // direction column, normal
   
  .direction-order ( @d, @o ) when ( @d = column ) and ( @o = normal ) {
  
    @d1 : column;
    @d2 : normal;
    @d3 : vertical;
    
    }
    
   // direction column, reverse
   
  .direction-order ( @d, @o ) when ( @d = column ) and ( @o = reverse ) {
  
    @d1 : column-reverse;
    @d2 : reverse;
    @d3 : vertical;
    
    }
    
  /* end add buttons to header */

You want change EN/ES button to EN/ES flags?

13 hours ago, tuanphan said:

You want change EN/ES button to EN/ES flags?

Yes, that would be goal.

Add to Design > Custom CSS. Replace 2 images url with 2 flags url

/* Flags */
div.header-actions-action--cta>a:first-child {
    background-image: url(https://cdn.pixabay.com/photo/2020/06/01/10/02/puffin-5246026__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent !important;
}
div.header-actions-action--cta>a:last-child {
    background-image: url(https://cdn.pixabay.com/photo/2021/05/05/07/00/bride-6230420__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent !important;
}

13 hours ago, tuanphan said:

Add to Design > Custom CSS. Replace 2 images url with 2 flags url

/* Flags */
div.header-actions-action--cta>a:first-child {
    background-image: url(https://cdn.pixabay.com/photo/2020/06/01/10/02/puffin-5246026__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent !important;
}
div.header-actions-action--cta>a:last-child {
    background-image: url(https://cdn.pixabay.com/photo/2021/05/05/07/00/bride-6230420__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent !important;
}

 

They now show up as blank buttons

On 6/29/2021 at 4:51 AM, DSGNRAgencia said:

They now show up as blank buttons

Please check your image urls. It doesn't exist.

10 hours ago, tuanphan said:

Please check your image urls. It doesn't exist.

I'm having trouble with custom files now for some reason, they show up as blank and the link doesn't work, but previously uploaded files don't do this. I used external urls and it worked like a charm! Thank you!

One final question: can it be done in the mobile dropdown menu? I tried pasting the same string after "@media only screen and (max-width: 768px)" but it did nothing.

On 7/2/2021 at 1:10 AM, DSGNRAgencia said:

I'm having trouble with custom files now for some reason, they show up as blank and the link doesn't work, but previously uploaded files don't do this. I used external urls and it worked like a charm! Thank you!

One final question: can it be done in the mobile dropdown menu? I tried pasting the same string after "@media only screen and (max-width: 768px)" but it did nothing.

Use this code

/* Flags */
.header-menu-cta>a:first-child {
    background-image: url(https://cdn.pixabay.com/photo/2020/06/01/10/02/puffin-5246026__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent !important;
}
.header-menu-cta>a:last-child {
    background-image: url(https://cdn.pixabay.com/photo/2021/05/05/07/00/bride-6230420__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent !important;
}

14 hours ago, tuanphan said:

Use this code

/* Flags */
.header-menu-cta>a:first-child {
    background-image: url(https://cdn.pixabay.com/photo/2020/06/01/10/02/puffin-5246026__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent !important;
}
.header-menu-cta>a:last-child {
    background-image: url(https://cdn.pixabay.com/photo/2021/05/05/07/00/bride-6230420__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent !important;
}

 

I'll have to find better pics but that definitely did the trick. Thank you so much!