Header button editing on version 7.1

Hello All

I am trying to add png files to each of my pages buttons on my header so they are each images instead of the page titles.

Does anyone know a quick css injection code to do this? 

I managed to change the simple button on the left hand side using this:

.header-actions-action .btn {

background-color: transparent !important; 

background-image: url('https://static1.squarespace.com/static/6179b3a6c4909223cdca00b4/t/61846391ad15664b1e6ebe27/1636066193817/Button+icon+medical-02.png'); 

background-size: contain !important; 

  background-position: center;

background-repeat: no-repeat !important;

}

wondering if there is a way to specify this to the pages buttons on the header as well? sample photo of what my site looks like now... just started first time using squarespace thanks in advance!

On 11/5/2021 at 7:33 AM, webdesigners2 said:

Hello All

I am trying to add png files to each of my pages buttons on my header so they are each images instead of the page titles.

Does anyone know a quick css injection code to do this? 

I managed to change the simple button on the left hand side using this:

.header-actions-action .btn {

background-color: transparent !important; 

background-image: url('https://static1.squarespace.com/static/6179b3a6c4909223cdca00b4/t/61846391ad15664b1e6ebe27/1636066193817/Button+icon+medical-02.png'); 

background-size: contain !important; 

  background-position: center;

background-repeat: no-repeat !important;

}

wondering if there is a way to specify this to the pages buttons on the header as well? sample photo of what my site looks like now... just started first time using squarespace thanks in advance!

Can you share your site with the protected password to check it together?

Here is the domain. I am using for right now

https://maracas-nectarine-syjx.squarespace.com/

password is: geneticapass

For furture members.

Solved with these code

div.header-nav-item:last-child a {
    background-image: url(https://static1.squarespace.com/static/6179b3a6c4909223cdca00b4/t/618c244a06650e7446e1f294/1636574282133/Button+icon+Home-05.png) !important;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    color: transparent !important;
    justify-content: center !important
}

div.header-nav-item:nth-last-child(4) a {
    background-image: url(https://static1.squarespace.com/static/6179b3a6c4909223cdca00b4/t/618c420b013e1d7448894bab/1636581899382/Button+icon+wellness-03.png) !important;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    color: transparent !important;
    justify-content: center !important
}

div.header-nav-item:nth-last-child(2) a {
    background-image: url(https://static1.squarespace.com/static/6179b3a6c4909223cdca00b4/t/618c434c28edff5fc7888d43/1636582220870/Button+icon+medical-02.png) !important;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    color: transparent !important;
    justify-content: center !important
}

div.header-nav-item:nth-last-child(3) a {
    background-image: url(https://static1.squarespace.com/static/6179b3a6c4909223cdca00b4/t/618c431a613a6861da544494/1636582170568/Button+icon+skin-04.png) !important;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    color: transparent !important;
    justify-content: center !important
}

div.header-nav-item:first-child a {
    background-image: url(https://static1.squarespace.com/static/6179b3a6c4909223cdca00b4/t/61848078c7d50d5dbcb93219/1636073592898/Button+icon+shop-01.png) !important;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    color: transparent !important;
    justify-content: center !important
}

.header-actions-action .btn {
    background-color: transparent !important;
    background-image: url(https://static1.squarespace.com/static/6179b3a6c4909223cdca00b4/t/61847e6e73f9a25df268f364/1636073070087/book+now+button.png);
    background-size: contain !important;
    background-position: center;
    background-repeat: no-repeat !important
}