I am trying to convert my existing HTML Bootstrap menu into WordPress theme menu. I already created menu called “Primary” in WordPress, but can’t get it in theme exactly the same as in HTML. My HTML Bootstrap code now is like this:
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
<a class="navbar-brand js-scroll-trigger" href="#page-top" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="menu-1.html" rel="nofollow noreferrer noopener">Menu-1</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="menu-2.html" rel="nofollow noreferrer noopener">Menu-2</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="menu-3.html" rel="nofollow noreferrer noopener">Menu-3</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="menu-4.html" rel="nofollow noreferrer noopener">Menu-4</a>
</li>
</ul>
</div>
</nav>
</div>
Can someone please help with this?
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
You have to edit the files in:
wordpress/wp-content/themes/twentyseventeen/template-parts/navigation/navigation-top.php
and then create a custom walker, try to take a look here.
Try in this way:
<?php
/**
* Displays top navigation
*
* @package WordPress
* @subpackage Twenty_Seventeen
* @since 1.0
* @version 1.2
*/
?>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
<a class="navbar-brand js-scroll-trigger" href="#page-top" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<?php
wp_nav_menu( array(
'container' => false,
'menu_id' => 'istoby-nav',
'menu_class' => 'navbar-nav ml-auto',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'theme_location' => 'top',
'depth' => 5,
'fallback_cb' => false,
'walker' => new Bootstrap_Menu_Walker()
) );
class Bootstrap_Menu_Walker extends Walker_Nav_Menu {
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
$t = '';
$n = '';
} else {
$t = "t";
$n = "n";
}
$indent = ( $depth ) ? str_repeat( $t, $depth ) : '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
// Filters the arguments for a single nav menu item
$args = apply_filters( 'nav_menu_item_args', $args, $item, $depth );
// Filters the CSS class(es) applied to a menu item's list item element
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
// Filters the ID applied to a menu item's list item element
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args, $depth );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $id . $class_names .'>';
// it would be better to enter the class in Appearance -> Menus -> Screen Options -> CSS classes
// $output .= $indent . '<li' . $id . $class_names .'>';
$output .= $indent . '<li class="nav-item">';
$atts = array();
$atts['title'] = ! empty( $item->attr_title ) ? $item->attr_title : '';
$atts['target'] = ! empty( $item->target ) ? $item->target : '';
$atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
// Filters the HTML attributes applied to a menu item's anchor element
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}
$title = apply_filters( 'the_title', $item->title, $item->ID );
// Filters a menu item's title
$title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );
$item_output = $args->before;
$item_output .= '<a class="nav-link js-scroll-trigger"'. $attributes .'>';
$item_output .= $args->link_before . $title . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
?>
</div>
</nav>
</div>
For more information look here on:
You can also edit the file in:
wordpress/wp-content/themes/twentyseventeen/header.php
Have you ever thought of starting from a blank theme like understrap?
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0