I've got my HTML Custom Nav set up and it works fine for static template. I want to convert it into wordpress navigation menu. I am totally new to wordpress and i want help to convert html menu to wordpress.
Here is the HTML code :
<div id="cs-header-menu">
<div class="cs-container">
<!-- Main navigation -->
<div class="cs-toggle-main-navigation"><i class="fa fa-bars"></i></div>
<nav id="cs-main-navigation" class="cs-clearfix">
<ul class="cs-main-navigation cs-clearfix">
<li class="current-menu-item"><a href="#"><span>Homepages</span></a>
<ul class="sub-menu">
<li><a href="index-1.html">Homepage 1</a></li>
<li><a href="index-2.html">Homepage 2</a></li>
<li><a href="index-3.html">Homepage 3</a></li>
<li><a href="index-4.html">Homepage 4</a></li>
</ul>
</li>
<li><a href="blog_layout_1.html">Lifestyle</a></li>
<li><a href="blog_layout_1.html">Beauty</a></li>
<li><a href="blog_layout_1.html">Travel</a></li>
</ul>
</nav>
<!-- Search icon show -->
<div id="cs-header-menu-search-button-show"><i class="fa fa-search"></i></div>
<!-- Search icon -->
<div id="cs-header-menu-search-form">
<div id="cs-header-menu-search-button-hide"><i class="fa fa-close"></i></div>
<form>
<input type="text" placeholder="Type and press enter...">
</form>
</div>
</div>
</div>
</div>
I don't know how to use class and ids for div, nav, ul and li, and also for sub-menu items. Would anyone please help me with this. Thanks in advance.
I've got my HTML Custom Nav set up and it works fine for static template. I want to convert it into wordpress navigation menu. I am totally new to wordpress and i want help to convert html menu to wordpress.
Here is the HTML code :
<div id="cs-header-menu">
<div class="cs-container">
<!-- Main navigation -->
<div class="cs-toggle-main-navigation"><i class="fa fa-bars"></i></div>
<nav id="cs-main-navigation" class="cs-clearfix">
<ul class="cs-main-navigation cs-clearfix">
<li class="current-menu-item"><a href="#"><span>Homepages</span></a>
<ul class="sub-menu">
<li><a href="index-1.html">Homepage 1</a></li>
<li><a href="index-2.html">Homepage 2</a></li>
<li><a href="index-3.html">Homepage 3</a></li>
<li><a href="index-4.html">Homepage 4</a></li>
</ul>
</li>
<li><a href="blog_layout_1.html">Lifestyle</a></li>
<li><a href="blog_layout_1.html">Beauty</a></li>
<li><a href="blog_layout_1.html">Travel</a></li>
</ul>
</nav>
<!-- Search icon show -->
<div id="cs-header-menu-search-button-show"><i class="fa fa-search"></i></div>
<!-- Search icon -->
<div id="cs-header-menu-search-form">
<div id="cs-header-menu-search-button-hide"><i class="fa fa-close"></i></div>
<form>
<input type="text" placeholder="Type and press enter...">
</form>
</div>
</div>
</div>
</div>
I don't know how to use class and ids for div, nav, ul and li, and also for sub-menu items. Would anyone please help me with this. Thanks in advance.
Use this code bellow to dynamic you nav:
<?php
$args = array(
'theme_location' => '',
'menu' => 'Main',
'container' => 'false',
'container_class' => '',
'container_id' => '',
'menu_class' => 'cs-main-navigation cs-clearfix',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0,
//'walker' => new my_custom_walker_nav_menu()
);
wp_nav_menu ($args);
?>
</nav>
<!-- Search icon show -->
<div id="cs-header-menu-search-button-show"><i class="fa fa-search"></i></div>
<!-- Search icon -->
<div id="cs-header-menu-search-form">
<div id="cs-header-menu-search-button-hide"><i class="fa fa-close"></i></div>
<form>
<input type="text" placeholder="Type and press enter...">
</form>
</div>
</div>
</div>
</div>
For more details please see This ..... Hope it will solve your problem
<div id="cs-header-menu">
<div class="cs-container">
<!-- Main navigation -->
<div class="cs-toggle-main-navigation"><i class="fa fa-bars"></i></div>
<nav id="cs-main-navigation" class="cs-clearfix">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'container' => '',
'menu_class' => 'cs-main-navigation cs-clearfix"',
) );
?>
</nav>
<!-- Search icon show -->
<div id="cs-header-menu-search-button-show"><i class="fa fa-search"></i></div>
<!-- Search icon -->
<div id="cs-header-menu-search-form">
<div id="cs-header-menu-search-button-hide"><i class="fa fa-close"></i></div>
<form>
<input type="text" placeholder="Type and press enter...">
</form>
</div>
</div>
</div>
</div>
in wordpress we have a wp_nav_menu function that can get the navigation menu. For this you have to do register the menu i.e. register_nav_menus. The above code fetch the primary navigation you have registered like below on the function.php file.
// This theme uses wp_nav_menu() in two locations.
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'twentysixteen' ),
) );
You can add/remove/arrange/ the menu page on the Apperance->Menus and assign that to the Primary Menu. Hope that helps!!