Wordpress Custom Navigation Menus - wordpress

Question

Hi i have the following navigation menus from html css template. I want to change it in wordpress navigation. But CSS doesnot work there. How can i save the css without losing its features.
<!--Header-->
<header class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a id="lgo" class="pull-left" href="index.html"><H1>Global BizVisions, LLC</h1></a>
<div class="nav-collapse collapse pull-right">
<ul class="nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Portfolio</li>
<li class="dropdown">
Pages <i class="icon-angle-down"></i>
<ul class="dropdown-menu">
<li>Career</li>
<li>Blog Single</li>
<li>FAQ</li>
<li>Pricing</li>
<li>404</li>
<li>Typography</li>
<li>Registration</li>
<li class="divider"></li>
<li>Privacy Policy</li>
<li>Terms of Use</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
<li class="login">
<a data-toggle="modal" href="#loginForm"><i class="icon-lock"></i></a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</header>
<!-- /header -->
I did is like this:
<!--Header-->
<header class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<h1>Global BizVisions, LLC</h1>
<div class="nav-collapse collapse pull-right">
<ul>
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'nav' ) ); ?>
<ul>
</div><!--/.nav-collapse -->
</div>
</div>
</header>
<!-- /header -->
and what are the things i need to change in functions.php or other.
Thanks in advance

Answer 1

you need create a walker in your functions.php look:
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
if( in_array('current-menu-item', $classes) ){
$classes[] = 'active ';
}
return $classes;
}
class My_Custom_Nav_Walker extends Walker_Nav_Menu {
function start_lvl(&$output, $depth = 0, $args = array()) {
$output .= "\n<ul class=\"dropdown-menu\">\n";
}
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
$item_html = '';
parent::start_el($item_html, $item, $depth, $args);
if ( $item->is_dropdown && $depth === 0 ) {
$item_html = str_replace( '<a', '<a class="dropdown-toggle" data-toggle="dropdown"', $item_html );
$item_html = str_replace( '</a>', ' <b class="caret"></b></a>', $item_html );
}
$output .= $item_html;
}
function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
if ( $element->current )
$element->classes[] = 'active';
$element->is_dropdown = !empty( $children_elements[$element->ID] );
if ( $element->is_dropdown ) {
if ( $depth === 0 ) {
$element->classes[] = 'dropdown';
} elseif ( $depth === 1 ) {
// Extra level of dropdown menu,
// as seen in http://twitter.github.com/bootstrap/components.html#dropdowns
$element->classes[] = 'dropdown-submenu';
}
}
parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
}
}
in your header.php (if your menu location is header) at the div .navbar-collapse:
erase the ul tag.
the ul is created in the wp_nav_menu:
<?php wp_nav_menu(array(
'theme_location' => 'nav_social',
'container' => false,
'walker' => new My_Custom_Nav_Walker(),
'items_wrap' => '<ul id="your_nav" class="navbar-right"></li>%3$s</ul>'
)
); ?>
remember you need create the menu on the functions.php
function register_my_menus(){
register_nav_menus(array(
'your_nav' => __('your_nav', 'siddharta naranjo')));}add_action('init','register_my_menus');

Answer 2

well
1- Go to wp-admin then
Apperance=>menu
2- create a menu
$nav_menu= array(
'theme_location' => '',
'menu' => 'here menu name',
'container' => 'div',
'container_class' => '',
'container_id' => '',
'menu_class' => 'sticky',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="%1$s">%3$s</ul>',
'depth' => 0,
'walker' => ''
);
wp_nav_menu( $nav_menu);
I think it will work out fine for you