Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Kenn Hyatt
Kenn Hyatt
9,683 Points
Posted by Kenn Hyatt
Kenn Hyatt
9,683 Points

Editing the menu generated from wp_nav_menu

Does anyone know of a way to wrap an 'a' tag around a 'li' tag when using wp_nav_menu?

This is the code I am trying to get wordpress to generate using wp_nav_menu:

<ul class="navi col-lg-12"> <a href="/page.html"><li class="tile">Button 1</li></a> <a href="/page.html"><li class="tile">Button 2</li></a> </ul>

I've been to the WP codex and tried the arguments but nothing.....any ideas?

Sean Roberts
Sean Roberts
4,856 Points
Sean Roberts
Sean Roberts
4,856 Points

"a" tags must fall within "li" tags in order to validate. What are you trying to accomplish?

Kenn Hyatt
Kenn Hyatt
9,683 Points
Kenn Hyatt
Kenn Hyatt
9,683 Points

I need the 'a' tag to envelope the 'li' tag because I want the entire element to be a button (not just the text) ie the entire 'li' tag is a button with a hover state that will activate a link without having to click the text.

Hmm, in order to validate.... I may have to rework this with JS

2 Answers

Sean Roberts
Sean Roberts
4,856 Points
Sean Roberts
Sean Roberts
4,856 Points

No need for js. If you want to make the entire "li" element a clickable item you should use css and make your "a" element a block (so it takes up 100% of the width of the parent element). So for example:

<ul class="nav"> <li><a href="#">Link One</li> <li><a href="#">Link Two</li> <li><a href="#">Link Three</li> </ul>

<style> ul.nav { list-style-type:none; margin:0; padding:0; font-size:0; } ul.nav > li { display:inline-block; } ul.nav > li > a { display:block; padding: 7px 20px; font-size:16px; background-color:blue; color:#fff; } ul.nav > li > a:hover { background-color:red; } </style>

Kenn Hyatt
Kenn Hyatt
9,683 Points
Kenn Hyatt
Kenn Hyatt
9,683 Points

Ah ok, that could work! This way I let wp_nav_menu create the menu and I can still have my button,

Thanks so much!

Dean Gray
Dean Gray
12,487 Points
Dean Gray
Dean Gray
12,487 Points

Hi,

What you are better of doing is making your <a> tag as big as you <li> through css.

From your code above I think you are using bootstrap as well so I copied a link below showing you how bootstrap does it, and what css classes you need to add.

http://v4-alpha.getbootstrap.com/components/navbar/

Kenn Hyatt
Kenn Hyatt
9,683 Points
Kenn Hyatt
Kenn Hyatt
9,683 Points

I do not follow, let me be sure I am being clear,

I am using wp_nav_menu like this for instance:

<?php $args = array( 'menu' => 'newpatient-menu', 'menu_class' => 'nav navbar-nav', 'container' => 'nav' );

wp_nav_menu( $args );

?>

I need the 'a' tag to envelope the 'li' because I want the entire element to be a button (not just the text). So how would I get the wp_nav_menu to generate this?