2

@media (min-width: 993px)
    body .main-navigation ul.menu li.menu-item-has-children.full-width > .sub-menu-wrapper {
        background-image: url(http://example.com/image1.jpg)
        height: 500px;
        background-repeat: no-repeat;
        background-position: center right;
    }
<li id="nav-menu-item-12169" menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
    <a href="#" class="menu-link main-menu-link"><span>Home</span></a>
    <span class="caret"></span>

    <div class="sub-menu-wrapper">
        <div class="container">
            <ul class="sub-menu">
            </ul>
        </div>
    </div>
</li>

<li id="nav-menu-item-12809" menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
    <a href="#" class="menu-link main-menu-link"><span>Water</span></a>
    <span class="caret"></span>

    <div class="sub-menu-wrapper">
        <div class="container">
            <ul class="sub-menu">
            </ul>
        </div>
    </div>
</li>

I have added a background image to sub-menu-wrapper and of course the image is applied to both menu items...

Is there any way to combine the menu ID with the class sub-menu-wrapper and then add a background image?

Here is my best example of what I’m trying to do...

#nav-menu-item-12169 + .sub-menu-wrapper Has background image 1
#nav-menu-item-12809 + .sub-menu-wrapper Has background image 2
corn on the cob
  • 2,093
  • 3
  • 18
  • 29
learnmorecode
  • 51
  • 5
  • Err, best I can think of is using the child selector? So the first child with class `sub-menu-wrapper` is given bkg 1, and the second child is given bkg 2 etc. – Robo Mop Nov 15 '20 at 06:03

2 Answers2

2
nav-menu-item-12169 > .sub-menu-wrapper{
    background-image: url('img1.jpg');
}

nav-menu-item-12809 > .sub-menu-wrapper{
    background-image: url('img2.jpg');
}
Redemption Okoro
  • 349
  • 1
  • 11
2

Using the CSS child selector > will solve your problem:

#nav-menu-item-12169 > .sub-menu-wrapper {
    background-image: url('img1.jpg');
}

#nav-menu-item-12809 > .sub-menu-wrapper {
    background-image: url('img2.jpg');
}
Shounak Das
  • 515
  • 4
  • 19