HELP! Editing code for template menu for mobile view

Forum|Forum|4 years ago
June 10, 2022
2 replies
279 views

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 A BOUQUET</span></a></div>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>

This topic has been closed for replies.

Best answer by Omar

@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

OmarAnswer

2025 Champion

@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

Helping E-commerce brands maximize Lifetime Value & Profits with Klaviyo, CRO & CVO - Get your free Audit - https://link.polarisgrowth.com/free-audit

David To

Klaviyo Employee

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

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials