I have created the theme and used the navbar walker menu in developing the dynamic menu and it's working well. Now, my question is, how do I add the button Login and signup to the navbar walker menu that is within the navbar loop not outside as I have done.
navbar walker menu Resources Navbar
<header id="header" class="fixed-top">
<div class="d-flex align-items-center justify-content-between">
<h1 class="logo"><a href="/"><?php if ( function_exists( 'the_custom_logo' ) ) { the_custom_logo();
} ?></a></h1>
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <img src="assets/img/logo.png" alt="" class="img-fluid">-->
<nav id="navbar" class="container navbar">
<?php
wp_nav_menu( array(
'theme_location' => 'Main',
'depth' => 2, // 1 = no dropdowns, 2 = with dropdowns.
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
) );
?>
<a class="nav-link signin btn-outline-primary scrollto" href="#about">Login</a>
<a class="nav-link btn getstarted scrollto" href="#about">Sign Up</a>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
</div>
</header><!-- End Header -->
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 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 am trying to implement fullpage.js in my WordPress theme. Everything works fine, but I cant find a way to use the standard WordPress nav with the fullpage.js anchors.
this is how i get my pages:
<?php $query = new WP_Query( 'page_id=5' ); ?>
<?php if( $query->have_posts() ): ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="section" id="section0">
<div class="content">
<div class="row">
<div class="col-sm-4">
<div class="content-text">
<h1 class="headline-about"><?php the_title(); ?></h1>
<?php the_content(); ?>
</div>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
That's my header including nav.
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container"><img id="logo-main" class="img-responsive" src="<?php bloginfo('template_directory'); ?>/img/birnis-logo.png"></div>
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
</div>
<div class="collapse navbar-collapse">
<?php
wp_nav_menu( array(
'theme_location' => 'top_menu',
'depth' => 0,
'container' => false,
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_page_menu',
//Process nav menu using our custom nav walker
'walker' => new wp_bootstrap_navwalker())
);
?>
</div><!--/.nav-collapse -->
</div>
</nav>
</header>
and here I load fullpage.js
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
verticalCentered: false,
anchors: XXX,
menu: '.nav'
});
});
</script>
Is there a way to change the code, so that every time I add a page to my menu it automatically adds a new anchor?
For example I create a new section with a different page_id.
After that I add the page to my menu in the WordPress back end.
Now I want the new list item to scroll to the right section.
I hope you understand what I am trying to achieve.
Thanks for your time, your answer is much appreciated!
I don't see any element in your markup with the class "nav".
It seems you have to use nav instead of .nav in the menu option:
$(document).ready(function() {
$('#fullpage').fullpage({
verticalCentered: false,
anchors: XXX,
menu: 'nav'
});
});
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.
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');
});
});