How to convert navbar to wordpress menu

Design help Custom code
#1

Hi

First I try this tutorial, it doesn’t work for me. I also check the WordPress documentation.

I try to convert my web flow design to WordPress theme. find out WordPress use ul or li element for the menu, but in webflow, we use element for the navbar, I have been try this for 2 days. they do not convert correctly. Thinking about changing them to ul or li, but my CSS stylesheet will need big updated it. Does anyone have any solution? please?

my navbar code:

<div class="div-block-18">
<div data-collapse="medium" data-animation="default" data-duration="400" class="navbar w-nav">
  <div class="container w-container">
    <a href="index.html" class="w-nav-brand">
      <div>
	  <img src="<?php bloginfo(stylesheet_directory)?>/assets/images/your-logo300.png" class="image-5">
	  </div>
    </a>
    <nav role="navigation" class="nav-menu w-nav-menu">
     <a href="index.html" class="nav-link w-nav-link"><strong class="bold-text">HOME</strong></a>
      <a href="about.html" class="nav-link-2 w-nav-link"><strong class="bold-text-2">ABOUT</strong></a>
      <a href="blog.html" class="nav-link-3 w-nav-link"><strong class="bold-text-3">BLOG</strong></a>
      <a href="shop.html" class="nav-link-3 w-nav-link"><strong class="bold-text-4">SHOP</strong></a>
      <a href="resource.html" class="nav-link-3 w-nav-link"><strong class="bold-text-5">RESOURCE</strong></a>
      <a href="contact.html" class="nav-link-4 w-nav-link"><strong class="bold-text-6">CONTACT</strong></a>
     </nav>
     <div class="menu-button w-nav-button">
      <div class="w-icon-nav-menu"></div>
    </div>
  </div>
</div>

Here’s what I try also:

<?php

	 wp_nav_menu( array(
		 'theme_location' => 'primary',
		 'container' => 'nav',
		 'container_class' => 'div-block-18',
		 'menu_class' => 'nav-link w-nav-link'
	   ));

	?>

Thank you guys so much!

#2

Here’s great resource can help you menu section:


Thanks!

#3

You could also add a list with list elements inside the Navmenu element and style those. Then WP would recognize them.

#4

I tried that, but they didn’t pick up my li element. Thank you for your suggestions.

#5

Hey, looking at this video where they taking a Webflow export and making it a Wordpress theme.

Around 38min in he’s talking about the links and menus. Could this help you out?

He’s using this plugin that seems to make some things easier handling with the code.

#6

well there are so many methods to converting the navbar to wordpress, either you may try to plugin oe wheter you may pick the drap and drop wordpress theme where you would easily make the menu or whole website even i have some coolection of drag and drop website templates you may check out here: http://themepik.com/2018/drag-drop-responsive-wordpress-themes/

#7

I love that video, thank you so much!

1 Like
#8

You can do this:
https://digwp.com/2011/11/html-formatting-custom-menus/

You could do a custom nav walker but this was simpler, I think. It allows you to specify the code and classes for the menu pretty easily.

and here’s the exact code:

  1. In the theme’s header.php

<?php if (function_exists(clean_custom_menus("main-menu","w-nav-link nav-link"))) clean_custom_menus("main-menu","w-nav-link nav-link"); ?> 
</nav>

and

  1. In functions.php

function clean_custom_menus( $menu_name , $menu_class) {
if (($locations = get_nav_menu_locations()) && isset($locations[$menu_name])) {
$menu = wp_get_nav_menu_object($locations[$menu_name]);
$menu_items = wp_get_nav_menu_items($menu->term_id);

	foreach ((array) $menu_items as $key => $menu_item) {
		$title = preg_replace('/\s+/','&nbsp;',$menu_item->title );
		//$title = $menu_item->title;
		$url = $menu_item->url;
		$menu_list .= '<a class="'.$menu_class.'" href="'. $url .'">'. $title .'</a>';
	}

} else {
	// $menu_list = '<!-- no list defined -->';
}
echo $menu_list;

}

You have to modify webflow line 2747 like so:
Menu

Had to use / before all the nav links to allow hopping between page templates since the site this is from is not truly a one page site.

#9

You can also use this simple clonable element: https://webflow.com/website/menu-links

Than you need to convert the Webflow template with the Udesly Adapter: https://www.udesly.com/udesly-adapter/

#10

Similar to Udesly Adapter you can use this open source plugin: https://github.com/Koala42/webflow-to-wordpress-menu . You just install it in wordpress and create menu as you are used to. Then include webflow .css and js. and you are done. It supports dropdown too.

08