Bootstrap Nav Walker Sub Menu Image

admin管理员组

文章数量:1026175

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>

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>

• menus
• images
• navigation
• twitter-bootstrap

Share Improve this question edited Apr 2, 2019 at 13:48 fuxia♦ 107k3939 gold badges255255 silver badges459459 bronze badges asked Apr 2, 2019 at 13:28 WDCreativWDCreativ 322 silver badges66 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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/reference/classes/walker/ and https://github/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/resources/adding-fields-menu-items/

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>

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>

• menus
• images
• navigation
• twitter-bootstrap

Share Improve this question edited Apr 2, 2019 at 13:48 fuxia♦ 107k3939 gold badges255255 silver badges459459 bronze badges asked Apr 2, 2019 at 13:28 WDCreativWDCreativ 322 silver badges66 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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/reference/classes/walker/ and https://github/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/resources/adding-fields-menu-items/

本文标签： Bootstrap Nav Walker Sub Menu Image