Issue with Custom Nav Buttons Klaviyo

  • 16 December 2021
  • 7 replies

Userlevel 1
Badge +2

Hi all! I’m including a photo here of an issue I am having (and have encountered before) with navs in Klaviyo. I’m not sure if I’m missing something, but I created these custom nav buttons for a client and although each image is the same height, they come into Klaviyo sized completely randomly. I’ve been able to adjust the width by eye in Klaviyo to make them match as closely as I could, but I would like to prevent this from happening at all. I am making these buttons in Illustrator. 

I’ve tried: 
-Images all being only as wide as the length of the words, but staying the same height. 
-Images all being as wide as the longest nav button (Our Whiskey) but staying the same height. 




Best answer by stephen.trumble 16 December 2021, 19:07

View original

7 replies

Userlevel 3
Badge +11

Hello Nina, 

Have you tried using the new editor? And add column layout in your template.

Check it here:


I was wondering if you could share those images you want to attach, in order for me to create a screen recording for you :)

Userlevel 1
Badge +2

Yep! I am doing this in the new editor, and the last time I encountered it was with a different client in the old editor. I am using the nav function, so I’m not sure how I would add columns to that as it already has a set design. Attached are the images I’m using. I am including the ones I would prefer to use, which have each nav button only being as wide as the word itself. 


Userlevel 1
Badge +2

I can see that they all appear differently there as well ^, but on my computer, they are the same height so I’m not sure what I’m missing. Thanks!

Userlevel 3
Badge +11

Good day, Nina.

Thank you for providing those images.

You'll need the "Our Whiskey" size, and use Canva to make a custom image then download those images.

Here's the screenrecord:


I hope it help you.

Userlevel 1
Badge +2

I’ve already tried making them all the size of “Our Whiskey” on illustrator and it didn’t work :/ Did you put those into columns? I am not doing that, I’m trying to use the header/link bar and that is where the sizing is acting weird. 

Userlevel 7
Badge +60

Hey @Nina W. 

Just want to give a shoutout to @thepowerofcopy really quick for jumping in to help with this!! Love seeing peers collaborate together to solve various challenges. Thank you so much! I also just wanted to add a little to this conversation when using images in email templates. 

Across the web, using 72dpi resolution is best practice. In general try to keep your images to 600px or less in width and less than 2000px in height, in order to balance image quality and loading speeds. The total width of Klaviyo emails are 600px, so subdividing that, each of your images should be no bigger than 150px wide and 500px in height. If you use the same font size and then save the image setting to these dimensions before saving the image, it may help you create consistency across the header you are trying to create. 

I hope this helps!! Thank you again for being part of the Klaviyo Community!

Userlevel 1
Badge +2

Thank you @stephen.trumble and @thepowerofcopy! That makes sense, I’ll try it out. Thanks again!