I'm building a wordpress theme using bootstrap for a little weekend side project and I've been running into an issue with wp_nav_menu.
Here is what my code looks like for my header.php:
<header class="site-header" role="banner">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Brand</a>
</div>
<?php
wp_nav_menu(array(
'menu' => 'primary',
'theme_location' => 'primary',
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'navbarDropdown',
'fallback_cb' => 'wp_page_menu',
'menu_class' => 'nav navbar-nav navbar-right',
'menu_id' => 'main-menu',
));
?>
</div>
</nav>
</header>
According to the documentation menu_class should render a ul with the specified class in the array. Instead its rendering a div with those classes, and the container properties seem to be nonexistent. This obviously doesn't play well with bootstrap, any ideas on why this is happening?
Here is what the output looks like:
It looks like you need to verify the menu slug 'menu' => 'primary' . May be you haven't created a menu that has the slug primary. Else just pass the relevant identification. It accepts (matching in order) id, slug, name, menu object.
Related
Having trouble getting the navwalker to expand on mobile.
I have added the code to functions php
// Register Custom Bootstrap Navigation Walker
require_once get_template_directory() . '/wp-bootstrap-navwalker.php';
Here is my navwalker code, if anyone can help me resolve this conundrum I would be most greatful. Please excuse the formatting on here.
<nav class="main-menu navbar navbar-bg thetop" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->
<a class="navbar-brand" href="<?php echo home_url(); ?>">
<?php if (function_exists('the_custom_logo')) {
the_custom_logo();
}
else{
bloginfo('name');
}
?>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker())
);
?>
</ul>
<!-- Search Form -->
<form id="searchform" class="navbar-form navbar-right" role="form" action="<?php echo home_url( '/' ); ?>">
<div class="input-group">
<input type="text" class="form-control" name="s" placeholder="Ara"><span class="input-group-btn"><button type="submit" class="btn btn-default btn-primary -red"><span class="glyphicon glyphicon-search"></span></button></span>
</div>
</form>
</div>
</nav>
Nevermind I figured this out. I am building a new theme using wpBootstrapStarter. Recently updated the theme which also updated bootstrap release using jquery 3.3.2. I just downgraded and all is well.
I guess the devs didn't fully test before release. Good job i spotted via console.
My wordpress menu is not collapsing properly. Menu items are only hidden and when they supposed to be displayed, they are not look like list.
<div class="site-navigation-inner col-sm-12">
<div class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"><?php _e('Toggle navigation','_tk') ?> </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<?php wp_nav_menu(
array(
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'menu_id' => 'main-menu',
'walker' => new wp_bootstrap_navwalker()
)
); ?>
</div><!-- .navbar -->
</div>
Maybe it's just a small thing, but I'm Wordpress newbie. Thank you!
#media (max-width: 767px) {
//get your nav to the left here and float the menu-items
}
That Should work.
I try to implement Jasny Bootstrap Off Canvas menu with wordpress with wp-bootstrap-navwalker. The slide effect works great but it's empty. You could see the Jasny Bootstrap Off Canvas menu here
Here is my code :
<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
<?php /* Primary navigation */
wp_nav_menu( array(
'menu' => 'top_menu',
'depth' => 3,
'container' => 'div',
'container_class' => 'offcanvas',
'container_id' => 'myNavmenu',
'menu_class' => 'nav navmenu navmenu-default',
//Process nav menu using our custom nav walker
' walker' => new wp_bootstrap_navwalker())
);
?>
</nav>
<div class="navbar navbar-default navbar-fixed-top">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data- target="#myNavmenu" data-canvas="body">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
I think my problem comes from the menu class, container class and container id.
Thanks.
I found the problem. It was an old css style in my style.css who enter in conflict with the Jasny Bootstrap Menu.
Shame on me. :)
I'm creating a WordPress theme from scratch using Bootstrap. I'm making the menu now, and so far it's going smooth. I have created a right aligned div for a top widget to show for example language flags. I have removed the collapse classes so the widget always is shown in the menu. The problem is that if you're on a smaller screen, I want to put the widget inside the menu, so the user have to click the menu button to see the menu and widget. Any suggestions?
Here's my code:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">TEST
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<?php echo site_url(); ?>"><?php bloginfo('name'); ?></a>
</div>
<div id="navbar" class="navbar-collapse collapse navbar-left">
<?php wp_nav_menu( array(
'menu_class' => 'nav navbar-nav',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker()
) ); ?>
</div>
<div id="navbar" class="navbar-right">
<div class="top-right">
<div class="top-widget"> <?php dynamic_sidebar( 'right-top' ); ?> </div>
</div>
</div>
</div>
</nav>
I suggest you use javascript to clone the widget and append it to your menu, then use CSS to show/hide it for the appropriate screen sizes.
Beware of the duplicate id <nav id="navbar". Better make the right one <nav id="navbar-right".
Javacript:
$(document).ready(function () {
$('#navbar-right .top-widget')
.clone()
.appendTo( $('#navbar') )
.attr('id', 'widget-within-navbar');
}):
CSS:
#widget-within-navbar{ display: block }
#media (min-width: 768px) {
#widget-within-navbar { display: none }
}
Disclaimer: It's been a while since I used the jQuery's clone() and appendTo() functions so I don't guarantee that my syntax is correct. But hopefully you get the gist.
Bit of an odd question. I can't seem to find a solution to it anywhere.
I'm using the Bootstrap navwalker on my WordPress site. When using the navbar-brand class to display and link my logo to the homepage, it seems you have to click in a very certain area of the logo (obviously not good from a usability point of view.) Does anyone know how to make this clickable area bigger?
My site: http://www.franhaines.co.uk/paddlethewye/
My code:
<header>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<?php echo home_url(); ?>"><img class="logo" src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="" /></a>
</div>
<?php
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</div>
<div id='phone'>
<img src='http://www.franhaines.co.uk/paddlethewye/wp-content/themes/BareTheme/images/telephone.png'>01600 890027
</div>
</nav>
I do not believe my CSS is overriding anything as I haven't altered the width/height of any of the classes except the navbar toggle.
Does anyone have any suggestions? Cheers.
A bit of a strange situation you have going on here but I found that if you apply the following styles to the and the element the clickable area will span the entire logo.
<a class="navbar-brand" href="http://www.franhaines.co.uk/paddlethewye" style="min-width: 250px;">
<img id="logo" src="wp-content/themes/BareTheme/logo.png" alt="Paddle the Wye Logo" border="0" style="position: absolute;z-index: 2;"></a>
applying the min-width 250px to the link and position absolute and z-index to the logo will solve the issue