Solved

HELP! Editing code for template menu for mobile view

  • 10 June 2022
  • 2 replies
  • 147 views

Badge +1

Hi there, 

 

I have a text block with our custom header menu I want to use in our new Klaviyo Template. I am using the new builder. The code works great for Desktop view, but not for mobile. I want to be able to drop the last menu item to underneath the other menu items on mobile, like in the example attached.

 

Currently my code gives me this: 

 

Can you please help edit my code? 

Code: 

<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th class="column-top bg-nav" style="font-size: 0pt; line-height: 0pt; padding: 0; margin: 0; font-weight: normal; vertical-align: top;" valign="top" bgcolor="ffffff">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="text-14 c-black l-black tdn p-15 pl-30 mpl-15" style="font-size: 11px; line-height: 22px; font-family: Poppins, Arial, sans-serif; text-align: center; min-width: auto !important; color: #ffffff; text-decoration: none; padding: 15px; padding-left: 30px;">
<div><a href="https://www.flowersacrossmelbourne.com.au/occasion/anniversary/" target="_blank" class="link tdn c-white" style="text-decoration: none; color: #5e6b7a;" rel="noopener"><span class="link tdn c-white" style="text-decoration: none; color: #5e6b7a;">OCCASIONS</span></a></div>
</td>
<td class="text-14 c-white l-white tdn p-15" style="font-size: 11px; line-height: 22px; font-family: Poppins, Arial, sans-serif; text-align: center; min-width: auto !important; color: #ffffff; text-decoration: none; padding: 15px;">
<div><a href="https://www.flowersacrossmelbourne.com.au/style/bouquets/" target="_blank" class="link tdn c-white" style="text-decoration: none; color: #ffffff;" rel="noopener"><span class="link tdn c-white" style="text-decoration: none; color: #5e6b7a;">STYLES</span></a></div>
</td>
<td class="text-14 c-white l-white tdn p-15" style="font-size: 11px; line-height: 22px; font-family: Poppins, Arial, sans-serif; text-align: center; min-width: auto !important; color: #ffffff; text-decoration: none; padding: 15px;">
<div><a href="https://www.flowersacrossmelbourne.com.au/flowers-by-price/?high=49&low=20/" target="_blank" class="link tdn c-white" style="text-decoration: none; color: #ffffff;" rel="noopener"><span class="link tdn c-white" style="text-decoration: none; color: #5e6b7a;">PRICE</span></a></div>
</td>
<td class="text-14 c-white l-white tdn p-15" style="font-size: 11px; line-height: 22px; font-family: Poppins, Arial, sans-serif; text-align: center; min-width: auto !important; color: #ffffff; text-decoration: none; padding: 15px;">
<div><a href="https://www.flowersacrossmelbourne.com.au/extras/alcohol/" target="_blank" class="link tdn c-white" style="text-decoration: none; color: #ffffff;" rel="noopener"><span class="link tdn c-white" style="text-decoration: none; color: #5e6b7a;">GIFTS</span></a></div>
</td>
</tr>
</tbody>
</table>
</th>
<th class="column-top bg-nav-btn" style="font-size: 0pt; line-height: 0pt; padding: 0; margin: 0; font-weight: normal; vertical-align: top;" valign="top" bgcolor="#FFEDE3">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="text-14 c-white l-white tdn p-15" style="font-size: 11px; line-height: 22px; font-family: Poppins, Arial, sans-serif; text-align: center; min-width: auto !important; color: #ffffff; text-decoration: none; padding: 15px;">
<div><a href="https://www.flowersacrossmelbourne.com.au/create-a-bouquet/" target="_blank" class="link tdn c-white" style="text-decoration: none; color: #ffffff;" rel="noopener"><span class="link tdn c-white" style="text-decoration: none; color: #5e6b7a;">CREATE&nbsp;A&nbsp;BOUQUET</span></a></div>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>

icon

Best answer by Omar 10 June 2022, 07:06

View original

2 replies

Userlevel 7
Badge +44

@Taleisha I'd suggest to start with mobile first and then move to desktop to see if it works.

Honestly I don't think it's going to be possible unless you show/hide blocks depending on responsiveness but personally I don't like and use these functions anymore because things often go wrong with this. 

With tables it's going to be hard to have that block go to the second line if you ask me.

My advice would be to focus on mobile first and then move to desktop.

 

Hope this helps

 

Omar Lovert

Polaris Growth

Userlevel 7
Badge +60

Hey @Taleisha,

@Omar brings up some great points and solution of using show/hide blocks, especially with custom coded content. 

I’m no email designer so I’m thinking in terms of how you would accomplish this using the Klaviyo template editor. One solution that came to mind would be creating your “create a bouquet” option separately installing of grouping it with the rest of your header options. Since emails are typically automatically optimized for mobile, having a it as a standalone object - either custom coded or using a Klaviyo block - should not subject it to the same optimizations as the other header options. 

If you require more assistance in working with your custom code, I would suggest working with an email designer you’re familiar with or reaching out and working alongside some of our great Klaviyo Partners which you can find from our Klaviyo Partner Directory. You mind find some familiar faces such as @Omar himself on that list!

David

Reply