Would someone like to help me? How can I add a div to a wp_nav_menu container from:
<nav id="my-menu"><ul><li>...[menu-items]...</li></ul></nav>
to:
<nav id="my-menu"><div class="additional-element"></div><ul><li>...[menu-items]...</li></ul></nav>
You could do something like this.
Just put other args you need in the array, you can check them in, wp_nav_menu() page
<nav id="my-menu">
<div class="additional-element"></div>
<?php wp_nav_menu( array(
'container' => false
)); ?>
</nav>
Related
I am creating a wordpress menu as follows:
<?php wp_nav_menu(
array(
'theme_location' =>'main_nav',
'walker' => new Walker_Nav_Primary()
)
); ?>
It generates the menu with exact structured way as I expect. i.e:
<ul id="menu-primary" class="menu">
<li class="dropdown">
Mega
<ul class="dropdown-menu">
<li>sub 1</li>
<li>sub2</li>
</ul>
</li>
</ul>
But hover effect is stop working. When I replace wp_nav_menu() with the generated html it works again. I checked all the jquery code is set at footer.php and my menu is located at header.php and get_header() is called before get_footer(). So everything should be okay if static html is okay. Strange! which wrong is going on behind the scene.
I think, your menu has some issues with closing HTML tag. Better way to debug HTML issue is:
hold the menu HTML into a variable.
Print the variable inside htmlentities function.
Now you can visually see what's wrong with your printed HTML.
Hope that would help you to solve the issue. Thanks
You may need to add this into the array:
'echo' => true,
Such as
<?php wp_nav_menu(
array(
'theme_location' =>'main_nav',
'walker' => new Walker_Nav_Primary(),
'echo' => true
)
); ?>
The official document is shown here,
php
<nav class="site-nav">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'container' => false,
'menu_class' => 'nav-menu'
) );
?>
</nav> <!-- .site-nav -->
How can i add some of element inside the menu like layout below
<ul class="nav-menu">
<li>link_1</li>
<li>link_1</li>
...
<div class="new-element"> <!-- new element -->
<span>something</span>
<span>more</span>
</div> <!-- new element end -->
</ul>
Thanks.
Is very easy (not need enter code in your theme files). You only need go to WordPress Admin site in: Appearance --> Menus ---> Select the Menu and Add the new elements of Posts, Categories, Pages, etc...
View Image:
Just do that in the Backend.
https://codex.wordpress.org/Function_Reference/wp_nav_menu states:
Displays a navigation menu created in the Appearance → Menus panel.
I just installed my theme to newly installed wordpress site. I didn't create any menu from appearence>menus, so by default wordpress showing "home" * "sample page" to the header as a default menu (I don't know the correct name, maybe callback menu?)
the problem is they are not getting any style from my stylesheet, I know if I create my custom menu, they ll get the styles from css. but I want this default wordpress menu to get the css as well. so the theme doesn't look odd when first install. how to do it?
The default styling of the WP menu looks like this:
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<div class="nav-menu">
<ul>
<li class="page_item page-item-2">
Sample Page
</li>
</ul>
</div>
</nav>
You should be able to style the elements of the menu on your page using the appropriate classes in your style.css file.
create a menu by name "primary" in apperance -> menus, and assign menus under it and u can refer
http://codex.wordpress.org/Function_Reference/wp_nav_menu
or else use this in header.php:
<?php wp_nav_menu( array( 'theme_location' => 'primary'))?>
First, creat new menu area in your theme.
For this, once (if you didn't set it) allow menus in your theme with this function:
add_theme_support( 'nav-menus' );
After this, add new menu your theme with this function:
register_nav_menu('primary', 'Our first menu');
And add your header.php lastly for print your custom menu:
if ( has_nav_menu( 'primary' ) ) { $menu = wp_nav_menu( array( 'container' => '', 'echo' => '0', 'theme_location' => 'primary' ) ); $menuOutput = preg_replace( array( '#^<ul[^>]*>#', '#</ul>$#' ), '', $menu ); echo $menuOutput; } else { }
This output is same as:
<li class="menu-item some-class">
<a>Sample page</a>
</li>
Use
And CSS it!
ul.your-class{}
ul.your-class li{list-style:square}
ul.your-class li a{ color:red }
Normally the default menu is called in the header.php with the function wp_nav_menu(). You can add CSS classes as arguments to wp_nav_menu(). If you are unaware of that the please refer to: http://codex.wordpress.org/Function_Reference/wp_nav_menu.
My submenu is not displaying. I've tried all the possible wp_nav_menu php, but I just can't get my submenu to show up.
<?php wp_nav_menu( array('menu' => 'navigation' )); ?>
And you have checked your CSS? Most of the time it's just a display:none-problem.
I'm trying to accomplish two things with a walker for wp_nav_menu:
I would like the unordered list to be <ul id="my_list_id"
role="navigation"> instead of <ul id="my_list_id"
class="navigation"> (Or maybe both role and class?)
I'd like to wrap the unordered list with <!-googleon: all-> and
<!-googleoff: all->
Honestly, the code for a custom walker is tough for me to understand. Any help or guidance is appreciated.
wp_nav_menu has a option to add classes or other attributes to ul by using items_wrap.
below is the code -
wp_nav_menu( array( 'theme_location' => 'primary-menu','menu'=>'Primary', 'items_wrap' => '<ul id="my-nav" class="navigation" role="navigation">%3$s</ul>' ) );