CODEWITHSUNDEEP
phpcsswordpressnavigationhtml-lists
Alan Yong
Alan Yong

Reputation: 1043

Set class for wp_nav_menu

How to convert this :

<ul class="ulStyle">
<li class="liStyle">
<div class="first">
<div class="second">
menu1
</div>
</div>
</li>
</ul>

to wp_nav_menu

Too many div and class inside there, anyone can help me solve this problem?Thank you!

Upvotes: 2

Views: 941

Answers (3)

Damien Overeem
Damien Overeem

Reputation: 4529

Before starting with custom walkers, use the options before, after, link_before, link_after and items_wrap. See http://codex.wordpress.org/Function_Reference/wp_nav_menu

It will allow you to change the encapsulation of your menu items.

Upvotes: 0

apttap
apttap

Reputation: 468

This can be accomplished using the nth-child() selector in css

see the codepen here

use this css:

.wp_nav_menu div:nth-child(1) {

  background: blue;

}

.wp_nav_menu div:nth-child(2) {

  background: red;

}

with the following markup:

<ul class="wp_nav_menu">
  <li>
    <div>
      Foo
    </div>
    <div>
      Bar
    </div>  
  </li>
</ul>

Upvotes: 1

Alexandre Lavoie
Alexandre Lavoie

Reputation: 8771

As I see you are using a custom theme that have probably a Walker. In WordPress you can use a Walker to modify the HTML rendered by wp_nav_menu.

http://codex.wordpress.org/Function_Reference/Walker_Class

First, see if there is one, normally in theme/functions.php

Upvotes: 0

Related Questions