Icon as menu item not working on mobile

[Cellarific]

Hi- I'm working on https://www.torinwoodhall.com

I'm using a blank menu item (just  ), then custom CSS to add an Instagram icon as a background image for that menu item.

.instaicon {
background-image: url('/wp-content/themes/lay-child/images/Instagram-16x16-1.svg');
background-repeat: no-repeat;
background-position: left;
margin-left: 5px;
background-color: white;
width:20px;
height:20px;
}
.instaicon a {
width:22px;
display:block;
}

It's working great on desktop, but on mobile the menu item isn't full width and the icon doesn't display (there's just a black area around where the icon should be.

Could you please let me know how this is best resolved?

Many thanks

[felix_rabe]

 <li id="menu-item-5536" class="instaicon menu-item menu-item-type-custom menu-item-object-custom menu-item-5536">
      <a target="_blank" rel="noopener" href="https://www.instagram.com/t0zzawozza" class="_Default _Default" data-type="custom">
           <span>&nbsp;</span>
      </a>
 </li>

As you can see in the html. your <li> gets your custom icon and then the <a> has a background color in black on a mobile layout. so you kinda need to deactivate that background of <a> inside your custom <li>.

 .instaicon a {
  background-color: transparent!important;

}

[Cellarific]

Thanks!

Now the icon's displaying OK, but the list item has a transparent background. Any way to force that to black so it looks like the others while keeping the icon white?

[arminunruh]

leave this css in for lay options → custom css & html → custom css for desktop:

.instaicon {
background-image: url('/wp-content/themes/lay-child/images/Instagram-16x16-1.svg');
background-repeat: no-repeat;
background-position: left;
margin-left: 5px;
background-color: white;
width:20px;
height:20px;
}
.instaicon a {
width:22px;
display:block;
}

put this css in css for mobile:

.instaicon a {
        background-image: url(/wp-content/themes/lay-child/images/Instagram-16x16-1.svg);
        background-repeat: no-repeat;
        background-position: left;
        background-size: 20px;
        margin-left: 23px;
}

your css needs to be different for mobile than for desktop

[Cellarific]

Awesome- thanks, I'd missed that there was the option of different CSS for desktop & mobile. That's all working a treat now.

In case it should help someone else in the future, I did have to make a small change to the mobile CSS to get the icon positioned correctly:

.instaicon a {
        background-image: url(/wp-content/themes/lay-child/images/Instagram-16x16-1.svg);
        background-repeat: no-repeat;
        background-position: 23px;
        background-size: 20px;
}

Really appreciate your help :)