I am using bootstrap navwalker to build out my navigation in Wordpress. I have got it all working except for the dropdown in mobile. For some reason the dropdown works perfectly fine in desktop view, but once in mobile nothing happens.
I have added the code from the header.php file below.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a href="<?php echo get_option("siteurl"); ?>">
<img src="/wp-content/themes/Gaggia/assets/src/library/img/gaggia-logo.svg" class="navbar-brand" href="#">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll"
aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav ms-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 2, // 1 = no dropdowns, 2 = with dropdowns.
'container' => 'div',
'container_class' => 'nav',
'container_id' => 'navbar-collapse collapse',
'menu_class' => 'navbar-nav mr-auto',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
) );
?>
</ul>
</div>
</div>
</nav>
Does anyone have any idea why this might be happening. I updated the actual walker file to match data-bs-toggle instead of just data-toggle. This fixed the issue for desktop.
Any help would be appreciated.
Thanks,
Figured it out.
Added css class to resolve the issue.
.dropdown-backdrop {
position: static;
}
Related
I created the navigation with the navbar walker for Bootstrap 5 and everything works fine including the responsive menu.
Now I would like to create the menu right-justified. Unfortunately, my attempts to implement this have not been fruitful. According to Bootstrap, the class 'justify-content-end' would be provided so that the menu is aligned on the right side. Unfortunately, this didn't work either.
Below is the code snippet in the 'Header':
<header>
<nav class="navbar navbar-expand-md fixed-top navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#"><img
src="<?php echo get_template_directory_uri(); ?>/images/logotest2.svg" width="30" height="30"
alt="Logo" "></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-menu"
aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-menu">
<?php
wp_nav_menu( array(
'theme_location' => 'main_menu',
'container' => false,
'menu_class' => '',
'fallback_cb' => '__return_false',
'items_wrap' => '<ul id="%1$s" class="navbar-nav me-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
'depth' => 2,
'walker' => new bootstrap_5_wp_nav_menu_walker()
) );
?>
</div>
</div>
</nav>
If anyone has an idea how to do this, I would be grateful for any hint.
This question already has an answer here:
How to add custom HTML to wp_nav_menu?
(1 answer)
Closed 4 years ago.
I'm totally beginer in Wordpress and PHP. I am trying to move the page code in HTML with my own CSS to Wordpress and PHP. I have a problem with the menu. I think I am doing something wrong and I can't find a mistake.
I have a menu in my theme in HTML:
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span>Menu</span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>
<a class="page-scroll nav-width" href="#page_1">Page_01</a>
</li>
<li>
<a class="page-scroll nav-width" href="#page_2">Page_02</a>
</li>
<li>
<a class="page-scroll nav-width" href="#page_3">Page_03</a>
</li>
<li>
<a class="page-scroll nav-width" href="#page_4">Page_04</a>
</li>
<li>
<a class="page-scroll nav-width" href="#page_5">Page_05</a>
</li>
<li>
<a class="page-scroll nav-width" href="#page_6">Page_06</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
I registered my menu in functions.php:
<?php register_nav_menu( 'main', 'main_menu' ); ?>
and I try to put my menu it to the header.php usung this code:
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span>Menu</span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!--menu-->
<?php wp_nav_menu( array(
'menu' => '',
'container' => 'ul',
'container_class' => 'nav navbar-nav navbar-right',
'container_id' => '',
'menu_class' => 'nav navbar-nav navbar-left page-scroll nav-width',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="" class="nav navbar-nav navbar-right" role="menu" ></ul>',
'item_spacing' => '',
'depth' => 0,
'walker' => '',
'theme_location' => 'main'
) ); ?>
</div>
<!-- /.navbar-collapse -->
</nav>
When I'm creating a menu in Wordpress it doesn't work, menu isn't displayed on my page. What is wrong with this code?
I will be grateful for your help :)
i think you using bootstrap right?
for bootstrap there is a very nice navwalker...
just include the file and follow the documentation
https://github.com/wp-bootstrap/wp-bootstrap-navwalker
My question is simply put, how do I add the ability to dynamically add sub menu items from child pages, in the form of a dropdown, in a Wordpress site using bootstrap navbar. I have it setup to add menu items as a regular page is added using the following code:
<nav class="navbar nav-main navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="#"><img src="/wp-content/themes/brtheme/images/blue-realty-logo.png"></img></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right nav-main">
<!--<li>Link</li>-->
<!--<li>Link</li>-->
<!--<li>Link</li>-->
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
'container' => false,
'items_wrap' => '%3$s',
'depth' => '2'
));
?>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Every time a page is added through the Wordpress dashboard it gets added to my navbar but how do I implement the use of child pages?
I have used Bootstrap menu, I cant seem to see why the hamburger drop-down in not functioning.
at the moment the full menu is expanded on mobile and the hamburger symbol has not functionality, im not sure what has gone wrong in the code
Full code HTMl
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container" style="height: 63px;">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bootstrap-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="<?php echo get_page_link(2); ?>">
<img src="<?php bloginfo('url'); ?>/wp-content/uploads/2016/10/logo.png">
</a>
<button type="button" class="btn button-primary-signup navbar-btn navbar-right hidden-xs">
Sign up
</button>
<button type="button" class="login-button btn btn-link navbar-btn navbar-right hidden-xs">
Login
</button>
</div>
<div id="navbar" style="background-color: #333;max-height: 44px;">
<div class="container">
<?php bootstrap_megamenu_nav(); ?>
</div>
</div>
</nav>
function php
function bootstrap_megamenu_nav()
{
wp_nav_menu(array(
'theme_location' => 'locations-primary',
'depth' => 4,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bootstrap-navbar-collapse-1',
'menu_class' => 'nav navbar-nav yamm navbar-main-head',
'fallback_cb' => 'Yamm_Nav_Walker_menu_fallback',
'walker' => new Yamm_Nav_Walker())
);
}
There is no target with id="bootstrap-navbar-collapse-1".
The collapsible nav items are supposed to be contained in a collapse element.
See the Bootstrap docs for an example:
http://getbootstrap.com/components/#navbar-default
Hi I am getting error in my wordPress Bootstrapped menu first of all it there is submenu in the about us when I hover my mouse it does not open. secondly on mobile screen responsive button is not working and displaying menu list already without clicking
here is my site: http://www.abiglittlebiz.com/trevelle/
Here is my code:
<nav class="navbar navbar-inverse">
<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>
<?php
wp_nav_menu(
array (
'theme_location' => 'primary',
'container' => 'div',
'container_class' => '',
'container_id' => 'navbar',
'menu_class' => 'nav navbar-nav'
)
);
?>
</div><!--/.container-->
</nav>
</header>