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. :)
Related
Here is my code, the overall design will get an improvement soon enough. Just currently getting it functional.
Anyway the issue is when on a mobile phone and you click on the navbar toggle button, then menu shows and disappears instantly.
<div class="header-main white">
<div class="container-fluid">
<div class="logo">
<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Mission Curling">
</div>
<div class="responsive-logo">
<img src="<?php echo get_template_directory_uri(); ?>/img/mcc-logo.png" alt="Mission Curling">
</div>
<div class="main-menu">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse">
<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 visible-xs" href="#"></a>
</div>
<div class="navbar-collapse collapse" id="bs-navbar-collapse">
<ul class="nav navbar-nav list-inline">
<?php
wp_nav_menu( array(
'menu' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-navbar-collapse',
'menu_class' => 'nav navbar-nav list-inline sub-menu normal-sub',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</ul>
</nav>
</div>
</div>
</div>
Though better yet here is a link to the website that I am having the issue on. Curling Website I am in the midst of building them a new wordpress site.
From what I can find is this becomes active after the toggle is clicked.
.collapse {
display: none;
visibility: hidden;
}
So manually if I change that visibility then it works fine. Anything obvious stick out?
in mobile layout when the menu button clicked it is adding "show" class in "navbar-collapse collapse" so the visibility hidden property of collapse is remaining as it is. to solve this either you can add visibility : visible property in show class or you can remove the visibility : hidden property from collapse class because show class is overwriting the display property of collapse so it will work fine without visibility property..
Just try overriding your bootstrap property.
.collapse {
display: none;
visibility: visible !important;
}
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.
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
Care: the example url's are from a development site for a non profit organization which helps children with a harelip in Venezuela. So there will be some pictures there that people prefer not to see.
I'm building the site with Twitter Bootstrap and have the navbar working with the wp_nav_menu without any problems.
Due #anchors in the nav on the homepage, it doesn't reload after click. Therefor the nav won't collapse back to its closed state. (so see the collapse button, resize your screen).
What I need is this: http://jsfiddle.net/hajpoj/By6ym/4/
Iv'e tried the stuff in the fiddle example and that worked seamless so it must be due additional classes / id's in the jQuery or something.
My jQuery ain't good enough to find or create a clean sollution.
Up until
The PHP:
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<p class="brand hidden-desktop">Menu</p>
<div class="nav-collapse collapse navbar-responsive-collapse ss-icon">
<?php $sitenavigatie = array(
'theme_location' => 'header-menu-left-page',
'menu_class' => 'menu',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'items_wrap' => '<ul id="%1$s" class="nav %2$s">%3$s</ul>',
'depth' => 0,
'walker' => new TessWalkerMenu());
wp_nav_menu( $sitenavigatie ); ?>
</div> <!-- end .nav-collapse .collapse .navbar-responsive-collapse -->
</div> <!-- end .container-fluid -->
</div> <!-- end .navbar-inner -->
The jQuery in the Fiddle:
$('.nav-collapse').click('li', function() {
$('.nav-collapse').collapse('hide');
});
Hope somebody can help.
update fiddle, pl see in link
jsfiddle.net/By6ym/23/
try add document ready or on window load.
$( document ).ready(function() {
$('.nav-collapse').click('li', function() {
$('.nav-collapse').collapse('hide');
});
});