Im starting with wordpress and I have a problem with a menu Im doing. In functions.php, I have this:
register_nav_menus(array(
'principal' => 'principal_bar'
));
Very simple. Now, in my header.php, I have this:
wp_nav_menu(array(
'container' => false,
'items_wrap' => '<ul>%3$s</ul>',
'theme_location' => 'principal',
'menu_class' => 'nav navbar-nav navbar-right'
));
As you can see, Im (trying) to use bootstrap classes in my menu. The thing is that when I edit my menu in the wordpress visual interface, the menu_class of my menu is removed (in Inspector, the ul ends with no class), and obviously the visual aspect of my menu is totally broken. My answer, Did I miss something? All tutos give the same way to do menus, but mine is not taking the classes at all. Am I doing something wrong here? Or is a problem bootstrap-wordpress? I am really confused right now... Thank you very much for your help...
You missing some properties in you items_wrap, should be:
wp_nav_menu(array(
'container' => false,
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'theme_location' => 'principal',
'menu_class' => 'nav navbar-nav navbar-right'
));
Related
I'm trying to insert a second menu into the header file just for the front page. The primary navbar is hidden by default and appears when the user scrolls down past the hero area. I'm putting a another menu in the hero area of the front page that, in theory, should be taking the same data as the navbar.
Navbar works great. Links populate correctly. They all work. Groovy. The hero menu, on the other hand absolutely does not.
I registered the hero-menu in functions.php.
// This theme uses wp_nav_menu() in three locations.
register_nav_menus(
array(
'Primary' => __( 'main-menu'),
'Secondary' => __( 'footer-menu'),
'Hero' => __('hero-menu')
)
);
The php is basically a straight copy/paste of the functional main-menu navbar, except for removing the navbar classes and changing the theme location.
// Navbar Menu
<div class="collapse navbar-collapse col-4" 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="text-primary navbar-nav ms-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
'depth' => 2,
'walker' => new bootstrap_5_wp_nav_menu_walker()
));
?>
</div>
. . . .
// Hero Menu
<div>
<?php
wp_nav_menu(array(
'theme_location' => 'hero-menu',
'container' => false,
'menu_class' => '',
'fallback_cb' => '__return_false',
'items_wrap' => '<ul id="%1$s" class="text-primary navbar-nav ms-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
'depth' => 1,
'walker' => new bootstrap_5_wp_nav_menu_walker()
));
?>
</div>
My menus are linked....
enter image description here
I initially tried linking my primary menu to it, and that failed. So I thought that maybe there was a problem with the menu linking to two theme locations, so I rebuilt the main menu as a second hero menu and linked that. Failed. I tried stripping the args down to nothing except the theme location. Fails. The php function itself is working, because if I turn fallback on, it does populate with the default, but not anything I'm actually wanting to populate it with. If I turn fallback off, it doesn't populate with anything.
Is there something here that I'm just missing?
I got it working. If anyone else has an issue like this, explicitly setting the 'menu' arg fixed it.
<?php
wp_nav_menu(array(
'menu' => 'hero-menu',
'theme_location' => 'hero-menu',
'container' => false,
'menu_class' => '',
'fallback_cb' => '__return_false',
'items_wrap' => '<ul id="%1$s" class="text-primary navbar-nav ms-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
'depth' => 1,
'walker' => new bootstrap_5_wp_nav_menu_walker()
));
?>
I'm assuming that indicates the GUI menu settings aren't functioning (or at least the option to link menus), which raises the question of why they're not working, but for the moment its working now.
I am using Bootstrap's navbar on my Wordpress menu. The main menu items are all linked to WP pages. One of these menu items have a submenu that consists of anchors on that page, but when I display the WP menu like this:
<?php
wp_nav_menu( array(
'theme_location' => 'header-menu',
'depth' => 2,
'container' => 'div',
'container_class' => 'navbar-collapse collapse',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
The item that has a submenu loses its href to a page and gets replaced with # instead. Any ideas on how to fix this? Thanks in advance.
I'm doing some maintenance on a website. I thought it was easy but I can't display submenu. The costumer said that the template was developed for them so probably the submenu feature was not included in it.
I don't know much php (actually I know very few) and I can't find a solution on google. I can use html and css pretty well to style it but before I need it to display.
here is the code I have in the header.php:
<span id="toggle_nav" class="icon-menu"></span>
<?php wp_nav_menu( array( 'theme_location' => 'main-navigation', 'container' => false, 'menu_id' => 'nav', 'menu_class' => '', 'link_after' => '', 'depth' => 1, 'fallback_cb' => false ) ); ?>
Thanks in advance,
Daniele
The comment from Ash Patel was indeed the right solution:
'depth' => 1
to
'depth' => 0
I'm fairly new to Wordpress and am trying to do something very specific. I am currently using the awesome html5blank to create my custom theme. I am using the native menus for my nav tabs. I am currently using background-image's to make my nav tabs images instead of text but that is posing problems with what I'm trying to achieve w/ css and making it responsive.
I want to be able to add <img> tags( different image for each <li> ) in my <li>'s via HTML.
As far as I've been able to find and read up, I need to create a custom structure in this found in my function.php file?
function html5blank_nav()
{
wp_nav_menu(
array(
'theme_location' => 'header-menu',
'menu' => '',
'container' => 'div',
'container_class' => 'menu-{menu slug}-container',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul>%3$s</ul>',
'depth' => 0,
'walker' => ''
)
);
}
Please let me know what else I need to provide to make this question make more sense and help you get me on the right track. Thanks in advance.
It does not work that way. There are few options to do it:
Use CSS background. Each menu item will have some shared classes, also a unique class name you can work with, enough for you to add different background image for each. Read the Codex for more.
Well, if you REALLY need to add inline <img>, it doable but I would not recommend. Go to Appearances > Menus, and add a custom link to menu, and insert your <img> tag into the Navigation Label box.
OR simply don't use wp_nav_menu(), hard code your menu instead.
I'm working on a new wordpress site and I'm building it with the Foundation framework. I'd like to add the class "main" to the links in the navigation that is built with wp_nav_menu. Eventually, I'll probably want to add the class "has-flyout" to others. Any idea on how to do this? I'm assuming I need to extend Walker (or can I do this with 'items_wrap'?), but that seems like overkill.
Currently, I have:
wp_nav_menu( array(
'theme_location' => 'primary_navigation',
'container' =>false,
'menu_class' => '',
'echo' => true,
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'depth' => 0,
'items_wrap' => '<ul class="nav-bar">%3$s</ul>'
));
You could use:
wp_nav_menu( array(
...
'menu_class' => 'main-menu',
...
And in your CSS (if that is what you want) access it like so:
ul.main-menu li { background: white; }
To add your "flyout" list-items maybe you could look into superfish? That system automatically adds "sf-with-ul" classes to list-items containing dropdowns.