Custom icon in nav item

General
1

Hi folks, I have a custom menu item that includes an icon just before the title of the page. I haven’t been able to get this to work in PG. I created an ACF called page_icon_classes and I tried to add it as follows:

<ul class="navbar-nav" cms-menu="primary">
<li class="nav-item ">
   <a class="nav-link" href="index.html">
      <i cms-post-field="page_icon_classes" cms-post-field-type="class" cms-post-field-acf></i>Home
   </a>
</li>
</ul>

But the content for page_icon_classes does not show. Everything else in the menu shows i.e. the linked page title.

All of the pages have the page_icon_classes field filled with data…just text representing classnames for the class=“” property

image
image825×277 9.44 KB

Any ideas?

2

@jcamachott this doesn’t work because the Menu action iterates for each Menu item, not the Page / post that is represented by that menu item. It is not a loop that goes through posts.

In addition, Menu action uses just the HTML layout of the first menu item and ignores any WP actions in there.

So, instead of using the Menu action, you could use Show Posts with Custom query to iterate over the group of posts you want to show in the navigation.

If you need to use the menu, you could include the code as the menu item name override when defining the menu.

Or, create a custom Gutenberg block that shows this markup for a group of hand picked posts (using the Show Posts with Block attribute).

As always, (too) many options in WP :slight_smile:

1 Like