Replace the top level menu navigation label with custom html button code

  • I have built a simple dropdown menu with 3 submenu items so now I have the TopMenu > SubItem1, SubItem2, SubItem3

    enter image description here

    I would like to change the TopMenu navigation label text with a custom HTML button code I’ve made so the original TopMenu text is not shown at all.

    First I’ve noticed that while creating the menu, if you delete the navigation label text and try to save it, it will delete the whole menu entry and this makes sense.

    I’ve also found that I can add a CSS Class to that specific TopMenu entry so I can customize it but while I could, for example, add a background image I don’t know how can I insert my button code and completely replace the TopMenu text.

    • This topic was modified 3 years, 10 months ago by dianne92.
    • This topic was modified 3 years, 10 months ago by dianne92.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    Use the “wp_nav_menu” filter to alter the menu’s HTML just before it is echoed out. Using PHP string functions, search out the “TopMenu” link text and replace it with whatever you like. Provided it’s valid HTML of course.

    Couldn’t you simply style the menu item with CSS to look like a button? Or is there something special about your button code?

    Thread Starter dianne92

    (@dianne92)

    Thank you for the wp_nav trick, I’ll try it right away and tell you how that worked out. As for styling the menu with CSS to look the way it looks in HTML, I’m not sure this can be done only with CSS.

    This is the button code:

    <button style="background-color: #ffffff; border: none; border-radius: 18px; padding: 4px; padding-left: 12px;">
<div class="button" style="display: flex; width: 60px; flex-direction: row; align-items: center; justify-content: space-between; background-color: white; border-radius: 18px;">
<div class="burger">
<svg width="18" height="18" viewBox="0 0 32 32" style="stroke-width: 3; stroke: currentcolor;">
    <path d="m2 16h28">
    </path>
    <path d="m2 24h28">
    </path>
    <path d="m2 8h28">
    </path>
</svg>
</div>
</div>
</button>
    • This reply was modified 3 years, 10 months ago by dianne92.
    Moderator bcworkz

    (@bcworkz)

    Inline SVG can be used to set a CSS background image like so:
    background-image: url("data:image/svg+xml,<svg tags go here>");
    That’s the tricky part. Hiding the link text and styling the rest of the button is more straight forward CSS.

    Any JavaScript that targets your button HTML would need adjustment to target the WP menu item instead. It may be easier to alter the menu HTML than alter the JavaScript, depending on where it’s coming from.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Replace the top level menu navigation label with custom html button code’ is closed to new replies.