0

I make a web page in Wordpress using a certain theme. Now, this theme has an expected markup for the menus:

<ul id=”primary-navigation-main”>
    <li>
        <a href=”https://example.com/page1”>Page 1</a>
    </li>
    <li>
        <a href=”https://example.com/page1”>Page 2</a>
    </li>
    <li>
        <a href=”https://example.com/page1”>Page 3</a>
    </li>
</ul>

On the mobile menu the wishes are slightly different. In the company they want some transition while pressing on the menu item. Something that I solved at another (hardcoded) menu like that:

<ul id=”primary-navigation-main”>
    <li>
        <div class=”transition-div”></div>
        <a href=”https://example.com/page1”>
            <p>Page 1</p>
        </a>
    </li>
    <li>
        <div class=”transition-div”></div>
        <a href=”https://example.com/page1”>
            <p>Page 2</p>
        </a>
    </li>
    <li>
        <div class=”transition-div”></div>
        <a href=”https://example.com/page1”>
            <p>Page 3</p>
        </a>
    </li>
</ul>

or like in this jsfiddle.

I don’t know if this is the best solution for this transition but it works.

So, I would like to add <div> into <li> before <a> and in the <a> I would like to add <p>. I was fiddling with wp_nav_menu and wp_nav_menu_items but I wasn’t successful. Do I need to register <ul> or something else? Also it seems I will have to use a Walker class but I don't know how.

Could anybody help me or simply tell me it's not possible?

1 Answer 1

0

I overslept and came to a completely different solution with the same visual outcome. It simply doesn't use additional div in the li elements and p elements in the a element. The jsfiddle shows the solution thanks to the Keith J. Grant's idea I encountered. So instead of Wordpress I honed a bit my CSS skills.

But actually, the question remains: how to insert an arbitrary markup into a certain existing menu (in my case the primary menu of the chosen theme). That is into each menu item li and then into each link a, preserving the menu's URLs.

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.