0

I would like to add images to each item of my sub menu.

At the moment, i've added a custom css class to each menu item in the wordpress admin dashboard and add to my css a class like that :

.menu-fildutemps::before{
content: url('myurl') !important; }

But it doesn't work for all items, just the first one.

Can someone could help me with that ?

Bellow, my nav code in header.php if necessary :

    <nav class="navbar navbar-expand-lg navbar-light sticky-top">

    <a class="navbar-brand small" href="<?php echo home_url(); ?>">
        <!-- Image -->
        <?php 

        $image = get_field('logo_izarra', 'options');

        if( !empty($image) ): ?>

            <img src="<?php echo $image['url']; ?>" class="logo-izarra" alt="<?php echo $image['alt']; ?>" />

        <?php endif; ?>
        <!-- Image -->
    </a>

    <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navmobile" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav m-auto">


            <?php
                wp_nav_menu( array(
                'theme_location'  => 'top1',
                'menu'            => 'top1',
                'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
                'container'       => 'div',
                'container_class' => 'collapse navbar-collapse',
                'container_id'    => 'navbarNav',
                'menu_class'      => 'navbar-nav m-auto',
                'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
                'walker'          => new WP_Bootstrap_Navwalker(),
            ) );

            ?>


            <a class="navbar-brand large" href="<?php echo home_url(); ?>">
                <!-- Image -->
                <?php 

                $image = get_field('logo_izarra', 'options');

                if( !empty($image) ): ?>

                    <img src="<?php echo $image['url']; ?>" class="logo-izarra" alt="<?php echo $image['alt']; ?>" />

                <?php endif; ?>
                <!-- Image -->
            </a>

            <?php
                wp_nav_menu( array(
                'theme_location'  => 'top2',
                'menu'            => 'top2',
                'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
                'container'       => 'div',
                'container_class' => 'collapse navbar-collapse',
                'container_id'    => 'navbarNav',
                'menu_class'      => 'navbar-nav m-auto',
                'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
                'walker'          => new WP_Bootstrap_Navwalker(),
            ) );

            ?>


        </ul>
    </div>
</nav>
0

Do you want the same image for each menu item?

.menu-item a:before {
   content: url("/path/to/image.png");
   display: inline-block;
}

The menu items should already have an ID on each <li>

li#menu-item-274 a:before {
    content: url("/path/to/another/image.png");
}

Failing that, you can implement your own Bootstrap Navwalker and add whatever classes or images you like.

See: https://developer.wordpress.org/reference/classes/walker/ and https://github.com/wp-bootstrap/wp-bootstrap-navwalker for how to create your own.

Update: A final suggestion, based on your comment is to use Advanced Custom Fields so that you can add an image field against each menu item. See this link for details: https://www.advancedcustomfields.com/resources/adding-fields-menu-items/

  • I think it's not the best way because if i moove or change menu item I'll must have to go on the CSS file, but currently, it's working with the ID. Thanks ! – WDCreativ Apr 2 at 14:47
  • Glad it working. Take a look at my updated answer as you may be best using ACF fields instead. This would let you add an image per menu item, and then use the NavWalker to output the image as you iterate through the menu. – Alexander Holsgrove Apr 2 at 14:51
  • I've already tried this options, but it doesn't work because i don't know how it's possible to add multiple images... Have I to add multiple "if" or "elseif" ? If you know the solution, can you help me with that on an updated answer ? ;) Thanks for all – WDCreativ Apr 2 at 15:02
  • Have a look at that "Adding Fields Manu Items" link I sent because you should be able to use a Wordpress filter instead of needing to use a Navwalker: advancedcustomfields.com/resources/adding-fields-menu-items/… – Alexander Holsgrove Apr 2 at 15:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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