Hi, I’m a WordPress instructor in Thailand and I really love Webflow and I use it in my recent class.
Here is a trick when you want to convert Webflow navbar into WordPress theme.
What different between these 2 platforms is the HTML structure of the navbar.
In Webflow, we use the <nav>
and <a>
like this
<nav class="w-nav-menu main-nav">
<a>link1></a>
<a>link1></a>
<a>link1></a>
</nav>
But in WordPress, the default navigation menu has a different structure
<ul class="w-nav-menu main-nav">
<li>link1></li>
<li>link1></li>
<li>link1></li>
</ul>
It took me a while to find the different and solution for this issue, but the most simplest way is to use the code below, WordPress fan would understand it well.
<?php
$defaults = array(
'theme_location' => 'top_menu',
'menu' => '',
'container' => '',
'container_class' => '',
'container_id' => '',
'menu_class' => 'w-nav-menu main-nav',
'menu_id' => '',
'echo' => false,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<nav id="%1$s" class="%2$s">%3$s</nav>',
'depth' => 0,
'walker' => ''
);
$find = array('><a', '<li');
$replace = array('', '<a');
echo str_replace($find, $replace, wp_nav_menu( $defaults ));
?>
We use the string replace to replace LI with A tag, and wrap it under WordPress nav menu default function.
Hope this helps,
Koft