Jump to content

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

Recommended Posts

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 */
Link to comment
  • Replies 8
  • Views 901
  • Created
  • Last Reply

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Link to comment
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.

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.