Insert a image before/after the “nav” tag

You could use ::before and ::after pseudo-elements on the <a> tag or the <li> tags for menu elements via CSS without dipping into the PHP

Thanks for the answer.
If only CSS is used, I can add only one static image to the menu
For instance:
. current-menu-item { background-image: url("images.jpg"); }
I want to attach an image to each menu item
in order to be more clearly, I create HTML version that I want to implement
https://jsfiddle.net/o43mv73s/3/
Click on menu items, please.
How can I do that ?

You’ve answered your own question! To have a single DOM element contain different images based on user interaction, you should use JavaScript.

Thanks. Can I ask one more question, please ?
If I use “wp_head” hook, I can add CSS to a page, where “content” property will change dynamically
private $current_menu_item_id = null;
add_action('wp_head', array( $this, 'om_aitm_wp_head'), 10);

    public function om_aitm_wp_head()
    {
        ?>
        <style type="text/css">
            nav[aria-label="Primary Menu"]::before
            {
                display: block;
                text-align: center;
                content: url( <?php echo get_post_meta($this->current_menu_item_id, '_om_aitm_attached_image', true); ?> );
            }
        </style>
        <?php
    }

But hook works first before the filter, therefore the “$this->current_menu_item_id” variable is always empty.
add_filter( 'nav_menu_css_class', array( $this, 'om_aitm_nav_menu_css_class'), 9, 2 );

public function om_aitm_nav_menu_css_class( $classes, $item )
    {
      if( in_array( 'current-menu-item', $classes ) )
      {
        $classes[] = 'om_aitm_add_image';
        $this->current_menu_item_id = $item;
      }
      return $classes;
    }

May I get current menu item id in the om_aitm_wp_head function ?

(I want to avoid using JS)

• This reply was modified 7 years, 6 months ago by Oleksandr Myronchuk.

No, you are right, the value is not established in “wp_head”. You can generate CSS in style tags from the wp_head action and it will work, but that’s doing it wrong, FWIW. You’re supposed to enqueue styles. You can enqueue dynamic styles by referencing a PHP file that sends the proper headers expected for a CSS text file. Or at least use the “wp_print_scripts” action to output your CSS in style tags. That does not help getting values not yet established either way.

The only way to get specific images into the same container based on a user pick (with out JS) is to completely load a new page on click, where the image loaded is determined by the request. There are a number of filters for the wp_nav_menu() call where you can alter menu elements based on the current request.

I personally would simply include the image as an HTML element and avoid needing to dynamically alter CSS for a particular background image. You can still layer elements even with no background image, but with a normal img tag with a low z-index.

Thanks a lot