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
Related
I created two menus for my wordpress theme
One for desktop and other for mobile with this code:
function register_my_menus() {
register_nav_menus(
array(
'top-menu' => __( 'top Menu' ),
'footer-menu' => __( 'footer Menu' ),
'extra-menu' => __( 'Socials Menu' ),
'mobile-menu' => __( 'mobile Menu' ),
)
);
}
add_action( 'init', 'register_my_menus' );
i called this two codes in header.php:
menu in header:
<div class="mobile-menu"></div>
<ul class="menu">
<li class="page_item page-item-2">About</li>
<?php wp_nav_menu( array(
'theme_location' => 'top-menu',
));
?>
</div>
<div class="clear"></div>
<ul id="mobile-nav">
<?php
wp_nav_menu(array(
'theme_location' => 'mobile-menu',
));
?>
</ul>
<div class="clear"></div>
</div>
Result: mobile menu not shown
do you have a solution to display mobile menu ?
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 -->
I am trying to understand theme creating in WP. And according what I understand wp_footer() includes footer.php in the main page. But what I am don't understand is why wp_footer() is called in footer.php itself like in twentyseventeen footer ?
</div><!-- #content -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="wrap">
<?php
get_template_part( 'template-parts/footer/footer', 'widgets' );
if ( has_nav_menu( 'social' ) ) : ?>
<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'social',
'menu_class' => 'social-links-menu',
'depth' => 1,
'link_before' => '<span class="screen-reader-text">',
'link_after' => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),
) );
?>
</nav><!-- .social-navigation -->
<?php endif;
get_template_part( 'template-parts/footer/site', 'info' );
?>
</div><!-- .wrap -->
</footer><!-- #colophon -->
</div><!-- .site-content-contain -->
</div><!-- #page -->
<?php wp_footer(); Here?>
wp_footer() in wordpress in not used for including the footer, in fact get_footer() does that.
The wp_footer() is used for outputting data or doing background actions that run just before closing body tag.
Hope that makes it clear!!
As per my knowledge the wp_footer() in footer.php is used for printing scripts or data before the closing body tag on the front end.
Reference Link: http://www.twoclock.com/wp_footer-wordpress-action-hook/
I have a problem to set two ul in wp_nav_menu.
i have set like following code in html. i want to set in wp_nav_menu.
my code is.
<div class="collapse navbar-collapse menu-header-menu-container" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About Us</li>
<li>Athletes</li>
<li>Coach</li>
<li>Colleges</li>
<li>Contact Us</li>
</ul>
<ul class="user-action hidden-xs">
<li>Seach</li>
<li>Login</li>
<li>Register</li>
</ul>
</div>
So anyone can help me how to set two ul in wp_nav_menu.
First thing you need to do is register the 2 menus in the functions.php file.
function register_menus() {
register_nav_menus(
array(
'menu-1' => __('Primary Menu'),
'menu-2' => __('Secondary Menu')
)
);
}
add_action('init', 'register_menus');
Then in the WordPress dashboard under Appearance > Menus create the menus.
Be sure to set the theme locations to 'Primary Menu' and 'Secondary Menu'.
Place the following code where you want the menus to display (most likely header.php).
<?php wp_nav_menu(array('menu' => 'menu-1', 'container' => '<ul>', 'menu_class' => 'nav navbar-nav')); ?>
<?php wp_nav_menu(array('menu' => 'menu-2', 'container' => '<ul>', 'menu_class' => 'user-action hidden-xs')); ?>
If someone else has issues to fetch the right menu, you can try to exchange 'menu' to 'theme_location'.
<?php wp_nav_menu(array('theme_location' => 'menu-1', 'container' => '<ul>', 'menu_class' => 'marquee__inner')); ?>
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 -->