Add small image (additional logo) top right on header navigation on Dawn theme

[jaimeebrooks]

Hi there,

I am using Dawn theme and would like to add an additional logo to my site navigation.

As you can see attached, the site has a logo top left, but I would like to add another clickable logo on the right (between Contact and the search icon). I only want this to show on desktop or wide screens, not mobile.

https://uv-water-systems.myshopify.com/

PW: meedee

Thank you in advance!

[Dawood_Mirza_1]

Hi Jaimeebrooks,
To achieve the clickable logo, you need to add an image and link to redirect after the for loop used for list items in header.liquid file
also this use media query to enable it only in Desktop mode

Do you have coding knowledge, for me to help you further I would require more info!!!

[BSSCommerce-HDL]

Hi @jaimeebrooks

You can try this code by following these steps:

1. First, you need to upload the images that you intend to assign as the logo for your button header. To do that, first, go to the Content tab => select Files, then click the Upload Files button and select the image to upload.

2. After uploading the image, click on the Copy link button to get the cdn link of the newly uploaded image. This image link will be used in step 7 of my tutorial list so please pay attention to it

3. Next step, click on Sale channels => select Online Store => select Edit code to edit the theme code.

4. Find the base.css file in the Assets folder and add the following code at the end of the file to set position for custom btn :

.linkedin__icon {
  margin-right: 10px;
}  

5. We will start creating the button according to our wishes.

First, we need to create a file responsible for assigning a logo to the button. Go to the Snippets folder, choose to create a new file, name it so it’s easy to distinguish from the rest of the header buttons (eg Linkedin-btn, Instagram-btn…):

6. Add the following code to the newly created liquid file:

<style>
[class*='linkedin__icon'] {
    background: url("logo_cdn_link") !important;
    background-repeat: no-repeat;
    background-size: 100% 100% !important;
}
</style>

7. Paste the cdn link you copied in step 2 into the part I highlighted. This step plays the role of assigning the image link you want to the button:

8. In the final step, we will add a button element to the theme. Find the header.liquid file located in the Sections folder:

Here, press the key combination Ctrl + F and enter the phrase “header__icons” into the search bar:

9. After finding the location of the header_icons element, insert the following code into the line below to complete adding the Linkedin button to the list of buttons in the header:

<!-- CUSTOM HEADER BUTTON -->
<a target="_blank" href="your_custom_url" class="linkedin__icon header__icon link focus-inset{% if section.settings.menu != blank %} small-hide{% endif %}">
   {% include "Snippet_Btn_file" %}
</a>
<!-- END CUSTOM HEADER BUTTON -->

In this code, your_custom_url contains the url you want the button to point to, and Snippet_Btn_file is the file name that assigns the logo corresponding to each button that chungsta created in step 5.

=> After completing the above steps, our custom button will be displayed on the storefront:

=> You can also add more custom buttons by repeating the steps as I instructed:

[Mel39]

It worked very well thank you for the good explanation but I cannot see my icon on mobile…

[emilyowlish]

Would you happen to be able to help me with this? I am using Impact Theme, and cannot seem to be able to add a secondary logo or icon.

[AppliqueJordan]

How can I add a logo instead of an icon in the same place? And how can I make it show on mobile as well?

[shamah141]

Worked for me! Thank you so much!

[Mabinibooks]

Bro, I found this randomly on internet, thank you for this, great help

[stonecold]

I followed the steps and ended up with this error on the header.

[Mabinibooks]

Bro, you have to change the “Snippet_Btn_file” to the name of the snippet, example mine is “apple”. Hope this helps