1

I have purchased an HTML theme that I want to rebuild into Wordpress. I'm having trouble making the menu work.

Beneath is the HTML for the menu. (without the beginning and end of the UL).

<li class="menu-level-0"><a href="portfolio-cols3.html"><i class="icon-menu icon-menu1"></i><span>Portfolio</span></a>
                <ul class="submenu-1">
                    <li class="menu-level-1"><a href="portfolio-cols3.html"><span>Three Columns</span></a></li>
                    <li class="menu-level-1"><a href="portfolio-cols4.html"><span>Four Columns</span></a></li>
                </ul>
            </li>

            <li class="menu-level-0 current-menu-item"><a href="#"><i class="icon-menu icon-menu2"></i><span>Pages</span></a>
                <ul class="submenu-1">
                    <li class="menu-level-1"><a href="about-us.html"><span>About Page</span></a></li>
                    <li class="menu-level-1"><a href="pricing.html"><span>Pricing Page</span></a></li>
                    <li class="menu-level-1 current-menu-item parent"><a href="index.html"><span>Home Pages</span></a>
                        <ul class="submenu-2">
                            <li class="menu-level-2 current-menu-item"><a href="index.html"><span>Gallery images</span></a></li>
                            <li class="menu-level-2"><a href="index-2.html"><span>OneByOne Slider</span></a></li>
                            <li class="menu-level-2"><a href="index-3.html"><span>Video in header</span></a></li>
                            <li class="menu-level-2"><a href="index-4.html"><span>Image &amp; Video Slider</span></a></li>
                        </ul>
                    </li>
                    <li class="menu-level-1 parent"><a href="services-2.html"><span>Services Page</span></a>
                        <ul class="submenu-2">
                            <li class="menu-level-2"><a href="services-2.html"><span>Services Page (var1)</span></a></li>
                            <li class="menu-level-2"><a href="services.html"><span>Services Page (var2)</span></a></li>
                        </ul>
                    </li>
                    <li class="menu-level-1"><a href="blog.html"><span>Sidebar Right</span></a></li>
                    <li class="menu-level-1"><a href="blog-sidebar-left.html"><span>Sidebar Left</span></a></li>
                    <li class="menu-level-1 parent"><a href="#"><span>Shortcodes</span></a>
                        <ul class="submenu-2">                              
                            <li class="menu-level-2"><a href="shortcodes-buttons.html"><span>Buttons &amp; Lists</span></a></li> 
                            <li class="menu-level-2"><a href="shortcodes-text.html"><span>Text &amp; Images</span></a></li>
                            <li class="menu-level-2"><a href="shortcodes-charts.html"><span>Charts</span></a></li>  
                            <li class="menu-level-2"><a href="shortcodes-columns.html"><span>Columns</span></a></li>
                            <li class="menu-level-2"><a href="shortcodes-columns-full.html"><span>Columns full width</span></a></li>
                            <li class="menu-level-2"><a href="shortcodes-lightbox.html"><span>Lightbox</span></a></li>
                            <li class="menu-level-2"><a href="shortcodes-media.html"><span>Videos &amp; Galleries</span></a></li>
                            <li class="menu-level-2"><a href="shortcodes-maps.html"><span>Google Maps</span></a></li>
                            <li class="menu-level-2"><a href="shortcodes-tabs.html"><span>Tabs &amp; Toggles</span></a></li>
                            <li class="menu-level-2"><a href="shortcodes-tables.html"><span>Boxes &amp; Tables</span></a></li>                            
                            <li class="menu-level-2"><a href="shortcodes-typography.html"><span>Typography</span></a></li>
                            <li class="menu-level-2"><a href="shortcodes-widgets.html"><span>Custom Widgets</span></a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="menu-level-0"><a href="blog.html"><i class="icon-menu icon-menu3"></i><span>Blog</span></a></li>
            <li class="menu-level-0"><a href="contact.html"><i class="icon-menu icon-menu4"></i><span>Contact</span></a></li>

I need to get the HTML returned by wp_nav_menu() look like the code above in order to get the menu the correct way in the template.

How should I do this?

Improve this question
6
  • What exactly is the problem here? Just use nested menu (you can edit it with drag&drop in Appearance->Menu).
    – Krzysiek Dróżdż
    Commented Jul 10, 2013 at 11:47
  • Thanks mate, my problem is letting this HTML work in the wordpress menu. So how can I say to Wordpress, when I make a menu you should use this class for this LI.
    – Roderik
    Commented Jul 10, 2013 at 11:50
  • So I want that when I put in the menu structure as seen above into Wordpress, the wordpress website generates the same HTML code as seen above.
    – Roderik
    Commented Jul 10, 2013 at 12:02
  • 1
    Have you looked into nav menu Walkers?
    – kaiser
    Commented Jul 10, 2013 at 12:21
  • yes, I have done that but I can't figure it out to fix it the right way.
    – Roderik
    Commented Jul 10, 2013 at 12:26

1 Answer 1

Reset to default
0

You can use same style of html menu and submenu in wp-menu classs and some minor changes in original wp-menu .then it exactly looks like your html menu.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.