I am building a custom wordpress theme using html5blank and CDN bootstrap. I have taken the glorious bootstrap nav structure and made it my own. I am now trying to replace the <ul>'s
with my <?php html5blank_nav(); ?> which currently spits out my menus that are made in APPEARANCE > THEMES > MENUS via wordpress.
How do I integrate <?php html5blank_nav(); ?> or whatever is being generated inside of those tags to the bootstrap <ul> where the html would look like this:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
/* WANT TO PUT MY WORDPRESS MENU HERE */
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div>
You can use this
<?php
$defaults = array(
'theme_location' => '',
'menu' => '',
'container' => 'div',
'container_class' => 'navbar-collapse collapse',
'container_id' => '',
'menu_class' => 'nav navbar-nav navbar-right',
'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' => ''
);
wp_nav_menu( $defaults );
?>
Related
I currently have a menu widget having following items this is item#1
$menuIteams[] = [
'label' => 'Vouchers',
'url' => '#',
'template' => '<a href="{url}" class="nav-link"><i class="icon-cash3"></i> <span>
{label}
<span class="d-block font-weight-normal opacity-50"></span> </a>',
'items' => [
['label' => 'View All', 'url' => ['/voucher/index'], 'template' => '<i class="icon-copy3"></i> {label}<span> '],
['label' => 'Create New', 'url' => ['/voucher/create'], 'template' => '<i class="icon-pen6"></i> {label}<span> '],
],
'options' => [
'class' => 'nav-item nav-item-submenu',
'data-submenu-title' => 'Layouts',
],
];
and am appending all items to menu widget
echo \yii\widgets\Menu::widget([
'options' => [
'class' => 'nav nav-sidebar',
'data-nav-type' => 'accordion',
],
'items' => $menuIteams,
'itemOptions' => array('class' => 'nav-item'),
'submenuTemplate' => "\n<ul class='nav nav-group-sub'>\n{items}\n</ul>\n",
'encodeLabels' => false, //allows you to use html in labels
'activateParents' => false,
]);
I want to my menuIteams[] {label} to appear on top of each respective sub menu item
So for above example Vouchers would appear on top of sub menu followed by list of items
Explained better with images
this to be similar to this
Of course the sidebar should be collapsed and sub menu should appear as a dropdown similar to be image#1
Html Rendered
<li class="nav-item nav-item-submenu" data-submenu-title="Layouts"><a href="#" class="nav-link"><i class="fas fa-print"></i> <span>
Print Digital
<span class="d-block font-weight-normal opacity-50"></span> </a>
<ul class='nav nav-group-sub' data-submenu-title=<li class="nav-item"><i class="icon-copy3"></i> Extra Material<span> </li>
<li class="nav-item"><i class="icon-copy3"></i> Finishing<span> </li>>
<li class="nav-item"><i class="icon-copy3"></i> Extra Material<span> </li>
<li class="nav-item"><i class="icon-copy3"></i> Finishing<span> </li>
</ul>
</li>
Expected
<li class="nav-item nav-item-submenu nav-item-open">
<i class="icon-color-sampler"></i> <span>Themes</span>
<ul class="nav nav-group-sub" data-submenu-title="Themes" style="display: block;">
<li class="nav-item">Default</li>
<li class="nav-item">Material</li>
<li class="nav-item">Dark</li>
<li class="nav-item">Clean <span class="badge bg-transparent align-self-center ml-auto">Coming soon</span></li>
</ul>
</li>
Figured it out from How to fetch data from database and set as submenus in yii2?
Had to move submenu template from menu widget to $menuIteams[]
$menuIteams[] = [
'label' => 'Cash Requisition',
'submenuTemplate' => "\n<ul class='nav nav-group-sub' data-submenu-title='Cash Requisition'>\n{items}\n</ul>\n",
'url' => '#',
'template' => '<a href="{url}" class="nav-link"><i class="icon-cash3"></i> <span>
{label}
<span class="d-block font-weight-normal opacity-50"></span> </a>',
'items' => [
['label' => 'View All Cash Requisitions', 'url' => ['/voucher/index'], 'template' => '<i class="icon-copy3"></i> {label}<span> '],
['label' => 'Create New Cash Requisition', 'url' => ['/voucher/create'], 'template' => '<i class="icon-pen6"></i> {label}<span> '],
],
'options' => [
'class' => 'nav-item nav-item-submenu',
],
];
I tried to add classes in ul li and a how to add classes on ul and li if using html5blank templates at html5blank_nav ().
how to add classes on ul and li if using html5blank templates at html5blank_nav()?
I use html5blank theme too.
If you open the functions.php file you will find this
function html5blank_nav() {
wp_nav_menu(
array(
'theme_location' => 'header-menu',
'menu' => '',
'container' => 'div',
'container_class' => 'menu-{menu slug}-container',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul>%3$s</ul>',
'depth' => 0,
'walker' => ''
)
);
}
Then you can edit the way is calling the wp_nav_menu to add class to the ul.
To add styles to the li you must go to wordpress admin and edit the menu
Go to admin > appearance > menu
Click on Screen Options (top right of the screen)
Check the CSS classes options in the “Show advanced menu properties” panel
Add your css classes to the element
I hope that's what you need
So as you can see the dropdown menu doesn't have any background color. How can i change this? Which class should i target so i can give a color to the dropdown menu?
Image:
https://i.stack.imgur.com/5dh88.png
I am usign wordpress and this is the code in the header.php
<nav id="mainNav" class="navbar navbar-expand-md navbar-dark fixed-top">
<?php if ( 'container' == $container ) : ?>
<div class="container">
<?php endif; ?>
<?php wp_nav_menu(
array(
'theme_location' => '',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'navbarNavDropdown',
'menu_class' => 'navbar-nav ml-auto',
'fallback_cb' => '',
'menu_id' => 'main-menu',
'walker' => new WP_Bootstrap_Navwalker(),
)
); ?>
</div>
</nav>
Where I made a mistake? Nav menu in Wordpress looks different from HTML Bootstrap nav menu.
I used this and did not get the same result as in HTML document.
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => 'nav',
'container_class' => 'navbar-collapse collapse',
'menu_class' => 'nav navbar-nav'
));
?>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Services</li>
<li class="dropdown">
Products <b class="caret"></b>
<ul class="dropdown-menu">
<li>Steel and fire doors</li>
<li>Stainless steel doors</li>
<li>Acoustic doors</li>
<li>Sliding doors</li>
<li>Revolving doors</li>
<li>Roller shutters</li>
<li>Fire curtains</li>
<li>Gates</li>
<li>Rapid doors</li>
<li>Access control</li>
<li>Accessories</li>
<li class="divider"></li>
</ul>
</li>
<li class="dropdown">
Industry <b class="caret"></b>
<ul class="dropdown-menu">
<li>Medical</li>
<li>Office and Residential</li>
<li>Industrial</li>
<li>Education</li>
<li>Retail</li>
<li>Shopping Mall</li>
<li>Transportation</li>
<li>Warehouse and Logistics</li>
<li class="divider"></li>
</ul>
</li>
<li>Projects</li>
<li>Contacts</li>
</ul>
</div>
You may apply the following code
wp_nav_menu(
array(
'menu' => 'main navigation',
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'theme_location' => 'main navigation',
'walker' => new WPSE_78121_Sublevel_Walker
)
);
For the submenu you may need to apply the Wordpress walker class
class WPSE_78121_Sublevel_Walker extends Walker_Nav_Menu {
function start_lvl(&$output, $depth = 0, $args = array()) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class='dropdown-menu'>\n";
}
function end_lvl(&$output, $depth = 0, $args = array()) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</ul>\n";
}
}
Hope it will helps you...
You can use bootstrap nav walker functionality.
Download bootstrap nav walker file and upload to your theme root directory.
https://github.com/twittem/wp-bootstrap-navwalker.
<?php
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'b3-navigation',
'menu_class' => 'nav navbar-nav navbar-right',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
It's very easy to implement menu like bootstrap.
I Hope this will work for you.
The default wordpress HTML output for nav
is ul tag and li tag...
I want to use my custom nav. For example
<nav class="nav">
About Us
News
Departments
Contact
</nav>
Wordpress has some default args for the menu that you can change
<?php
$args = array(
'theme_location' => '',
'menu' => '',
'container' => 'div',
'container_class' => '',
'container_id' => '',
'menu_class' => 'menu',
'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>',
);
echo wp_nav_menu( $args );
?>
In the wp-includes/nav-menu-template.php file you can change even more things. But if you change code in the corefiles than it may be overwritten by future upgrades, so be carefull.