How do i change the image on my navigation bar?

Store Design
1

How could i change this image to another image on my companys website? here is the navigation bar with the image highlighted

https://clair-de-lune.co.uk/

joshualev_0-1648815430376.png
joshualev_0-1648815430376.png1378×194 117 KB

2

Hi @joshualev ,

can you send us the url of the image you want to redeem so we can help you?

Thanks you

3

hi @AvadaCommerce

i have the image downloaded but here is a url of the image

4

is that right? i copy and pasted the url but for me, it has pasted the image here, let me know if you need a url

5

Hi @joshualev ,

Can you upload on your admin store then send me the link of the image?. You send me the image, I can’t insert it in html.

Thanks you

Screen Shot 2022-04-01 at 8.28.37 PM.png
Screen Shot 2022-04-01 at 8.28.37 PM.png2880×1800 419 KB

6

@AvadaCommerce

https://cdn.shopify.com/s/files/1/0295/6771/3340/t/10/assets/make_it_british.png?v=1648818088

Does this help? i cant send the image link for some reason and the web file of the image is obviously a link from my computer files which you wouldnt be able to access.

let me know if i need to send it in another way

7

make it british logo

@AvadaCommerce

8

Hi @joshualev ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme-custom.css->paste below code at the bottom of the file:
.made-in-uk-icon--container {
    background: url("https://cdn.shopify.com/s/files/1/0295/6771/3340/t/10/assets/make_it_british.png?v=1648818088") no-repeat;
    background-size: contain;
    width: 100px;
    background-position: 0 -10px;
    a {
        width: 100%;
        opacity: 0;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

9

@AvadaCommerce

when i do this it now looks like this, with part of the previous logo on top of the new logo?

joshualev_0-1648821508249.png
joshualev_0-1648821508249.png550×164 9.1 KB

10

Hi @joshualev ,

I messed up the code via scss. ^^

You can try replace previous code by below code:

.made-in-uk-icon--container {
    background: url("https://cdn.shopify.com/s/files/1/0295/6771/3340/t/10/assets/make_it_british.png?v=1648818088") no-repeat;
    background-size: contain;
    width: 100px;
    background-position: 0 -10px;
}
.made-in-uk-icon--container a {
    width: 100%;
    opacity: 0;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

11

@AvadaCommerce how to i change this? overlap? if you look on the site now and how it is on mobile? how to i keep it the same? https://clair-de-lune.co.uk/

joshualev_0-1648821950838.png
joshualev_0-1648821950838.png389×331 9.32 KB

12

Hi @joshualev ,

You can try replace previous code by below code:

.made-in-uk-icon--container {
    background: url("https://cdn.shopify.com/s/files/1/0295/6771/3340/t/10/assets/make_it_british.png?v=1648818088") no-repeat;
    background-size: contain;
    width: 100px;
    background-position: 0 -10px;
}
.made-in-uk-icon--container a {
    width: 100%;
    opacity: 0;
}
@media (max-width: 1000px) {
    .made-in-uk-icon--container {
        width: 200px;
        align-items: flex-start;
    }
    .made-in-uk-icon--container a {
        width: 100px;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

13

@AvadaCommerce thats perfect mate it just the image is not aligned as clean as last time if you can see here, and also if you wouldnt mind on the desktop layout too aligning it in the center of the nav bar. thanks for all the help so far!!

joshualev_0-1648823136594.png
joshualev_0-1648823136594.png828×1792 101 KB

joshualev_1-1648823155400.png
joshualev_1-1648823155400.png828×1792 104 KB

14

Hi @joshualev ,

You can try replace previous code by below code:

.made-in-uk-icon--container {
    background: url("https://cdn.shopify.com/s/files/1/0295/6771/3340/t/10/assets/make_it_british.png?v=1648818088") no-repeat;
    background-size: contain;
    width: 100px;
    background-position: 0 -10px;
}
.made-in-uk-icon--container a {
    width: 100%;
    opacity: 0;
}
@media (max-width: 1000px) {
    .made-in-uk-icon--container {
        width: 200px;
        align-items: flex-start;
    }
    .made-in-uk-icon--container a {
        width: 100px;
    }
    .footer__localization-form {
        margin-top: 6px;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

15

@AvadaCommerce that is perfect thankyoufor fixing it!! would you mind now just aligning the logo on desktop so it is in the center of the nav bar? at the moment it is closer to the top and i would just like to clean it u and center the image :slightly_smiling_face: thankyou so much

16

Hi @joshualev ,

You can try replace previous code by below code:

.made-in-uk-icon--container {
    background: url("https://cdn.shopify.com/s/files/1/0295/6771/3340/t/10/assets/make_it_british.png?v=1648818088") no-repeat;
    background-size: contain;
    width: 100px;
    background-position: 0 -6px;
}
.made-in-uk-icon--container a {
    width: 100%;
    opacity: 0;
}
@media (max-width: 1000px) {
    .made-in-uk-icon--container {
        width: 200px;
        align-items: flex-start;
    }
    .made-in-uk-icon--container a {
        width: 100px;
    }
    .footer__localization-form {
        margin-top: 9px;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like