ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Neighborhood
• April 30, 2015 at 11:29 am #170470
  PatrikCZ

  Member

  Post count: 51

  Hi guys,
  I’d like to ask you for help regarding cart icon in the header.
  As you can see on dogg.cz, when you browse on PC, there is white icon on black background.
  But when you switch to mobile view, there is white icon on white background, so the icon is “invisible”.
  Please, is there any solution how to make the cart icon black when mobile view?
  Thanks a lot,
  Patrik

  April 30, 2015 at 11:50 am #170484
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Hi,

  can’t find the white icon in the black background. can you attached a marked screenshot?
  Thanks

  -Rui

  April 30, 2015 at 12:14 pm #170490
  PatrikCZ

  Member

  Post count: 51

  Please find attachments…

  Attachments:

  You must be logged in to view attached files.
  April 30, 2015 at 12:33 pm #170495
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Didn’t notice you write cart icon. thanks for the info.

  That icon is done with one image
  http://www.dogg.cz/wp-content/themes/neighborhood/images/shopping_bag_icon.png

  In this case you should create a new image with black lines, then upload the image to your server and add the code below to your custom css option.

  Notice that you need to change the url below to the new black cart icon version.This css will only apply to mobile.

  
  .hidden-desktop i.sf-cart {
  background: transparent url('images/shopping_bag_icon.png') no-repeat top left!important;
  }

  Hope it helps.
  -Rui

  April 30, 2015 at 12:40 pm #170498
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please upload attached image at /wp-content/themes/neighborhood/images/ and use this custom css code:-

  @media only screen and (max-width: 767px) {
  .menu > li.shopping-bag-item a > i.sf-cart, .mobile-cart-link i.sf-cart {
      background: url("http://www.dogg.cz/wp-content/themes/neighborhood/images/shopping_bag_icon_new.png") no-repeat scroll left top transparent;
  }
  }

  Thanks
  Mohammad

  Attachments:

  You must be logged in to view attached files.
  April 30, 2015 at 1:04 pm #170508
  PatrikCZ

  Member

  Post count: 51

  Thank you guys, it’s working. Have a nice day!

  April 30, 2015 at 1:14 pm #170512
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  That’s great.
  -Rui

  May 1, 2015 at 1:05 pm #170842
  PatrikCZ

  Member

  Post count: 51

  Hi guys again
  Unfortunately I have to come back to you.
  We have found out, that mobile view is ok, but on tablet view is still the white icon.
  Please could you help me how set the black one also for tablet view?
  We have used solution from Mohammad, and we also created “@2x” version of the icon.
  Thanks a lot,
  Patrik

  May 1, 2015 at 1:17 pm #170843
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Hi,

  In Mohammad code replace this line
  @media only screen and (max-width: 767px) {

  by this one

  @media only screen and (max-width: 1024px) {

  -Rui

  May 4, 2015 at 9:33 am #171452
  PatrikCZ

  Member

  Post count: 51

  It is working, thank you!!

  May 4, 2015 at 9:35 am #171455
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Great thanks to Rui.
  Mohammad

• Back to forum

  Posted in: Neighborhood