Wordpress Boostrap NavMenu on mobile hides after displaying - wordpress

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;
}

Related

Wordpress Bootstrap Navwalker Driving Me Bonkers

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.

Make div in navbar show inside responsive menu

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.

Bootstrap collapse menu not scrolling on touch

I'm working on building a mobile nav menu using Bootstrap's collapse menu option and it opens/closes fine on both mobile and web but won't allow me to scroll on mobile when I'm using touch.
When I open the menu in the emulator I can scroll it with my mouse but if I use the emulator's click and drag, it doesn't move. Same goes if I push to production and test on mobile. Instead of scrolling the menu it's scrolling the body content behind the menu.
I can only confirm on iPhone for now because I haven't tried Android, but it's for sure not working on touch on iPhone.
I've tried raising the z-index to see if it was a layering issue, I've tried eliminating the max-height, I've even tried this https://www.gaslampmedia.com/multilevel-dropdown-menus-bootstrap-3-x/, which is supposed to solve all multi-level problems.
Nothing has worked.
////// UPDATES //////
1/11 #1:42PM: Just figured out I can get it to scroll on touch in the emulator by adding "max-height: none" to the "#navbar-collapse" styling — still not working when I push to production server and test on iPhone though.
Here's my HTML/PHP
<nav id="mobile-nav" class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" id="js-menu-icon" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="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 href="/">
<div class="mobile-logo"></div>
</a>
<div id="header-search-wrap-mobile" class="header-extra-btn">
<a href="#" class="block-link" id="header-search-btn-mobile">
<form action="/" method="get" id="site-search-form">
<input type="text" placeholder=" Site Search" name="s" id="search" class="site-search-mobile focus">
<button class="submit-search" type="submit" id="submit-search"><i class="glyphicon glyphicon-search" id="mobile-search-submit"></i>
</button>
</form>
</a>
</div> -->
<?php wp_nav_menu( array( 'menu'=> 'Main Nav', 'depth' => 2, 'container' => 'div', 'container_class' => 'collapse navbar-collapse', 'container_id' => 'navbar-collapse', 'menu_class' => 'nav navbar-nav', 'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 'walker' => new wp_bootstrap_navwalker()) ); ?>
</div>
</div>
</nav>
Ignore the comments, that has (or shouldn't) no effect on the dropdown, it's all in the header above the menu.
Not sure if it has anything to do with the nav items being loaded in php, but I assume it shouldn't be?
Also, I'm using this WordPress theme, if that helps http://pol-demo1.gogetthemes.com/?page_id=600
And here's what the code looks like after rendered in browser. Can get more screenshots if necessary!

WordPress Navwalker: Changing size of Navbar-Brand Clickable link?

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

Bootstrap navbar auto collapse issue with Wordpress menu

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');
});
});

Resources