Add Image or Text on Mobile Nav Only

[EdgarPateno]

Hi Shopify Experts,

Hope you can help me with this.

Our site is https://swished.com.au/

The mobile view is shown below.

We want to add an image or text in that squared red area - on mobile only.  You will click on the hamburger icon, and you will see the nav menus.  Under the menus, is there a way to add an image or text?

Please help.  Thanks

[EdgarPateno]

Hi @Isabellamia, thanks for your time.  It would be best if you can post your solution here, so others with the same issue can see it too.

Thanks and take care 

[BSS-Commerce · Accepted solution]

Hi @EdgarPateno 

I would like to give you some suggestions below:

- First, you go to Online Store > Edit code > theme.liquid find the closing tag </body> and then paste this script in front

<script>
 if((window.matchMedia("(max-width: 767px)").matches)){
   // if you want to add text
   let text = document.createElement('li')
   text.innerHTML = "<p class='menu-drawer__menu-item'>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more<p>"
   document.querySelector('.menu-drawer__menu').appendChild(text)
   // if you want to add an image 
   let image = document.createElement('li')
   image.innerHTML = "<img class='menu-drawer__menu-item' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTvOuR1N97-N0GQWU1wZ5A_IjRoWIg5kFEgzCPRcw8bk1U02HsPsmUXpgqn9xfpc-GUaoU&usqp=CAU'  width='200' height='230'>"
   document.querySelector('.menu-drawer__menu').appendChild(image)
 }
</script>

In the "img" tag, you should replace the image source link you need in the "src". As for Text, you change the content inside the <p class='menu-drawer__menu-item'></p> tag

We tested and it works. Hope that it works for you too.

[EdgarPateno]

@BSS-Commerce, thank you so much for your time and response.  I tried this and it worked.  I truly appreciate your expertise.  I will play around with this.   

[BSS-Commerce]

Hi @EdgarPateno 

I'm happy for our solution to help you solve the issue.

Best regards,

BSS Commerce Team

[EdgarPateno]

@BSS-Commerce, just one last thing.  How can I add not just an image but image + text, as in full html content?  Like image on the left and text on the right?