How to style ul part of navigation menu(custom menu) in wordpress? I have tried
<div id="serviceMenu">
<?php wp_nav_menu(array('menu'=>'navigation with more options',
'container' => '',
'menu_id' => '',
'menu_class' => 'menu')); ?>
</div>
But I don't know how to assign class="menu" to ul part?
Please help!!!
After reading the manual of wp_nav_menu I would suggest the following code for adding an menu class to the ul:
<div id="serviceMenu">
<?php
wp_nav_menu(array(
'menu'=>'navigation with more options',
'container' => '',
'menu_id' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'menu_class' => 'menu'));
?>
</div>
http://codex.wordpress.org/Function_Reference/wp_nav_menu
Related
I'm trying to set different navigations in the footer on my wordpress page.
I've registered the different navs inside functions.php:
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'bootstrapcanvaswp' ),
'language' => __('Language Menu', 'bootstrapcanvaswp'),
'rassismus' => __('Footer Rassismus'),
'antisemitismus' => __('Footer Antisemitismus'),
'rassismusstrafnorm' => __('Footer Rassismusstrafnorm'),
'bildung' => __('Footer Bildung'),
'medien' => __('Footer Medien'),
'oeffentlichkeit' => __('Footer Öffentlichkeit'),
'gra' => __('Footer GRA'),
'meldetool' => __('Footer Meldetool')));
and inside my footer.php I've set the different navigations:
<div class="row seven-cols footer-nav">
<div class="col-md-1">
<?php
wp_nav_menu( array(
'menu' => 'rassismus',
'container' => 'div',
'container_class' => 'footer-nav-compl'
));
?>
</div>
<div class="col-md-1">
<?php
wp_nav_menu( array(
'menu' => 'antisemitismus',
'container' => 'div',
'container_class' => 'footer-nav-compl'
));
?>
</div>
<div class="col-md-1">
<?php
wp_nav_menu( array(
'menu' => 'rassismusstrafnorm',
'container' => 'div',
'container_class' => 'footer-nav-compl'
));
?>
</div>
<div class="col-md-1">
<?php
wp_nav_menu( array(
'menu' => 'bildung',
'container' => 'div',
'container_class' => 'footer-nav-compl'
));
?>
</div>
<div class="col-md-1">
<?php
wp_nav_menu( array(
'menu' => 'medien',
'container' => 'div',
'container_class' => 'footer-nav-compl'
));
?>
</div>
<div class="col-md-1">
<?php
wp_nav_menu( array(
'menu' => 'oeffentlichkeit',
'container' => 'div',
'container_class' => 'footer-nav-compl'
));
?>
</div>
<div class="col-md-1 last-item">
<?php
wp_nav_menu( array(
'menu' => 'gra',
'container' => 'div',
'container_class' => 'footer-nav-compl'
));
?>
<?php
wp_nav_menu( array(
'menu' => 'meldetool',
'container' => 'div',
'container_class' => 'footer-nav-compl'
));
?>
</div>
</div>
My problem is that some are working well an other not, they just display the nav of "Antisemitismus"
Working:
Antisemitismus
Rassismusstrafnorm
Bildung
Medien
Meldetool
GRA
Not working (displaying Antisemitismus)
Rassimus (first)
Oeffentlichkeit (second to last)
In the backend I've set all navigations to the right name and none of the navigations are empty...
Does anyone had a similar problem or knows something to help me?
Thank you very much
Use theme_location instead of name - name is reffering to the value of the array you send to register_nav_menus, not the key.
what i want to achieved is this
<div class="someclass"> // in place of <ul>
<a class="item">Page Title</a>
<a class="item">Page Title</a>
<a class="item">Page Title</a>
.
.
.
</div>
This is the patter which is used by semantic UI for horizontal menu
I have achieved this much
<div class="ui secondary menu">
Services
Portfolio
Shop
</div>
by using code
<div class="ui secondary menu">
<?php
$menuParameters = array(
'menu' => 'top-menu',
'container' => false,
'echo' => false,
'items_wrap' => '%3$s',
'depth' => 0,
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
?>
</div>
But i want to add
class="item"
to
Services
Please guide..
thankx
Finally I able to do this..
<div id="menu1" class="ui secondary menu">
<?php
$menuParameters = array(
'menu' => 'top-menu',
'menu_class' => 'item',
'container' => false,
'echo' => false,
'items_wrap' => '%3$s',
'depth' => 0,
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
?>
</div>
<script>
jQuery( "#menu1 a" ).addClass( "item" );
</script>
You can use 'menu_class'=> 'item'
Example:
<div class="ui secondary menu">
<?php
$menuParameters = array(
'menu' => 'top-menu',
'menu_class' => 'item',
'container' => false,
'echo' => false,
'items_wrap' => '%3$s',
'depth' => 0,
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
?>
</div>
Read the codex about function wp_nav_menu, you're using it wrong, do something like this:
echo strip_tags(wp_nav_menu(
'items_wrap' => '<div id="%1$s" class="%2$s">%3$s</div>',
'menu_class' => 'myclass ui',
'echo' => false,
), '<a>');
In wordpress admin > appereance > menus, you can define classes for each link. Just make sure you've turned it on at the screen options.
But you can also do something like this to add a class.
Thankx Fermolina for your answer unfortunately it give me this output which dosent work
Code use
<div class="ui secondary menu">
<?php
$menuParameters = array(
'menu' => 'test-menu',
'menu_class' => 'item',
'container' => false,
'echo' => false,
'items_wrap' => '%3$s',
'depth' => 0,
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
?>
</div>
OUTPUT no class in
<div class="ui secondary menu">
Home
</div>
I need to use custom items_wrap format but it seems like it doesn't work at all.
<?php wp_nav_menu( array(
'menu_class' => 'menu',
'menu' => 'mobile-menu',
'theme_location' => 'main-navigation',
'container' => false,
'items_wrap' => '<ul data-role="listview">%3$s</ul>' ) ); ?>
The OUTPUT
<div class="menu">
<ul>
<li class="page_item page-item-2">Sample Page</li>
</ul>
Problem is that in output <ul> doesn't have data-role assigned as it should have.
Anyone have an idea why this function doesn't get the parameter right?
You could try this code:
<ul class="menu">
<?php wp_nav_menu( array(
'menu' => 'mobile-menu',
'theme_location' => 'main-navigation',
'container' => false,
'items_wrap' => '%3$s' ) ); ?>
</ul>
I've got a nav function in functions.php:
function html5blank_nav()
{
wp_nav_menu(
array(
'theme_location' => 'header-menu',
'menu' => '',
'container' => false,
'menu_class' => 'nav',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul class="%2$s">%3$s</ul>',
'depth' => 0,
'walker' => ''
)
);
}
And it's called in header.php with:
<?php html5blank_nav(); ?>
And my output is:
<div class="nav">
<ul>
<li class="page_item page-item-2">Sample Page</li>
<li class="page_item page-item-4">Test page</li>
</ul>
</div>
But What I was trying to achieve was this structure:
<ul class="nav">
<li>Sample Page</li>
<li>Test page</li>
</ul>
I thought that setting container=false would get rid of the containing divs, and that setting menu_class='nav' would add the nav class to the ul as it states here: http://codex.wordpress.org/Function_Reference/wp_nav_menu
Why isn't it recognising my settings?
from the Codex:
In order to remove navigation container, theme location specified in functions.php and used among arguments in function wp_nav_menu ( eg. 'theme_location' => 'primary-menu' ) must have a menu assigned to it in administration! Otherwise argument 'container' => 'false' is ignored
I have a HTML coded navigation menu which has CSS style and cool animation.
Now i wants to add this CSS and structure in Word Press. I have tried and also used in wp_nav_menu() .But result is so far. How could i use this CSS in Word Press.
CSS also included and working fine if i am using statically navigation HTML.
$defaults = array(
'theme_location' => 'header-menu',
'menu' => '',
'container' => 'div',
'container_class' => '',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0,
'walker' => ''
);
wp_nav_menu( $defaults );
Wants to add this css in Wordpress navigation menu
<ul class="menu">
<li class="current-menu-parent">Home
<ul class="sub-menu">
<li class="current-menu-item">Background Color</li>
<li>Background Color With Fullwidth Slider</li>
<li>Clean Style</li>
<li>Clean Style With Fullwidth Slider</li>
<li>Background Image</li>
</ul>
</li>
<li>Pages
<ul class="sub-menu">
<li>About</li>
<li>Full Width</li>
<li>Gallery</li>
<li>404 Page</li>
<li>Sitemap</li>
</ul>
</li>
</ul>
Is not so dificult to do that. You need to declare the class of the menu in array.
here is an exemple:
<?php $defaults = array(
'theme_location' => '',
'menu' => 'TopMenu',
'container' => 'ul',
'container_class' => 'topmenu-{topmenu slug}-container',
'container_id' => 'topmenu',
'menu_class' => 'topmenu',
'menu_id' => 'topmenu-{topmenu slug}[-{increment}]',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0,
'walker' => ''
); ?>
<?php wp_nav_menu( $defaults ); ?>
In this "topmenu" is the css class. I believe that from here you will be able to customize your menu.
Hope it help's you!
If you need a css sample, just let me know!