I wrote a mobile menu button which works fine until I add class "navbar-toggle" to it. After adding the class, the button gets left aligned.
<button type="button" class="col-xs-12 btn btn-success collapsed navbar-toggle" data-toggle="collapse" data-target="#primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'child-life-foundation' ); ?></button>
<nav class="navbar " role="navigation" id="navbar-collapse collapse">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu', 'menu_class' => 'nav' ) ); ?>
</nav><!-- #site-navigation -->
Related
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 have a website built with wordpress 4.5.3 on a free QUILL theme.
I decided to create a sticky menu by making a div that would only appear after a 100vh scroll and in this div to display the main menu.
I copied the main menu code:
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle"><i class="fa fa-bars"></i></button>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #site-navigation -->
and everything seemed to work fine until I took a look on mobile and noticed that only one of the menus work when clicking on the "burger".
So my question is what would be the best way to display the main menu twice on a page without any problem in mobile?
You need to make the different IDs for tag then both will work properly, there may be css you need to copy for old ID or you can use "HTML Class"
<nav id="site-navigation1" class="main-navigation" role="navigation">
<button class="menu-toggle"><i class="fa fa-bars"></i></button>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav>
<nav id="site-navigation2" class="main-navigation" role="navigation">
<button class="menu-toggle"><i class="fa fa-bars"></i></button>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav>
Change
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
To
<?php wp_nav_menu( array( 'menu' => 'Main Menu' ) ); ?>
'Main Menu' can be other names also, just check it from your admin panel
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.
I have an online store developed in Wordpress/WooCommerce and I need to add some flags, in top navigation.
In header.php I saw that that section is called by woo_top() function, but I don't find it.
Please help me to find this function or how to add some code in top navigation.
// Hook In
add_action( 'woo_top', 'woo_bootstrapped_nav' );
// Our hooked in Function
function woo_bootstrapped_nav() { ?>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<?php bloginfo( 'name' ); ?>
<?php
$args = array(
'theme_location' => 'top-bar',
'depth' => 2,
'container' => 'div',
'container_class' => 'nav-collapse collapse pull-left',
'menu_class' => 'nav',
'walker' => new Bootstrap_Walker_Nav_Menu()
);
wp_nav_menu($args);
?>
<ul class="nav secondary-nav pull-right">
<li class="dropdown"> <?php echo do_shortcode('[fblike style="button_count" width="90" float="left"][google_plusone size="medium" float="left" annotation="bubble"][twitter_follow username="twitter_name" show_screen_name="false" count="false" float="left"]'); ?></li>
</ul>
</div>
</div>
</div>
<?php } // End woo_bootstrapped_nav()
here in above code add flag images below home url link.