Home › Forums › WoodMart support forum › Change icon's mobile bottom navbar

Change icon's mobile bottom navbar

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 18, 2021 at 10:47 am #274564

    royberrev
    Participant

    Hi,

    I would like to change the icons in the mobile bottom navbar of my website. Preferably with custom icons.

    How can I accomplish this?

    March 18, 2021 at 10:59 am #274567

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    Please provide with some relevant screenshots of the specific areas which you want to change to check it myself and help you out accordingly.

    Regards.
    Xtemos Studios

    March 18, 2021 at 11:01 am #274568

    royberrev
    Participant

    Hi,

    I mean the icon’s in the bottom of the screenshot.

    Attachments:
    You must be logged in to view attached files.
    March 18, 2021 at 11:30 am #274574

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    I saw the screenshot you attached.

    Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

    For shop icon:

    .woodmart-toolbar-shop .wd-tools-icon:before {
    content: "";
    background: url(https://mijnhemel.webwolvesdemo.nl/wp-content/uploads/2021/02/Gastrovino_Mijn-Hemel_rond_cont.png) no-repeat;
    background-size: contain;
    height: 25px;
    width: 25px;
    position: absolute;
    margin-left: -12px;
    margin-top: -10px;
}

    For wishlist icon:

    .woodmart-wishlist-info-widget .wishlist-icon:before {
    content: "";
    background: url(https://mijnhemel.webwolvesdemo.nl/wp-content/uploads/2021/02/Gastrovino_Mijn-Hemel_rond_cont.png) no-repeat;
    background-size: contain;
    height: 25px;
    width: 25px;
    position: absolute;
    margin-left: -12px;
    margin-top: -10px;
}

    For cart icon:

    .woodmart-toolbar .woodmart-shopping-cart.woodmart-cart-alt .woodmart-cart-icon:before {
    content: "";
    background: url(https://mijnhemel.webwolvesdemo.nl/wp-content/uploads/2021/02/Gastrovino_Mijn-Hemel_rond_cont.png) no-repeat;
    background-size: contain;
    height: 25px;
    width: 25px;
    position: absolute;
    margin-left: -12px;
    margin-top: -10px;
}

    For My Account:

    .woodmart-toolbar .my-account-with-icon .wd-tools-icon:before {
    content: "";
    background: url(https://mijnhemel.webwolvesdemo.nl/wp-content/uploads/2021/02/Gastrovino_Mijn-Hemel_rond_cont.png) no-repeat;
    background-size: contain;
    height: 25px;
    width: 25px;
    position: absolute;
    margin-left: -12px;
    margin-top: -10px;
}

    In the above CSS you can use the image urls as per your needs.

    Best Regards

    March 18, 2021 at 3:36 pm #274615

    royberrev
    Participant

    This works fine for me thanks. However I wish to make two more changes.

    1) How can I adjust the position of the ‘number with background’ next to the cart icon? I wan’t the cart icon to be centered, and the green background with the amount of products in the cart a bit to the right by adding some padding to the right.

    2) Do you have some CSS to change the size of the text below the icons?

    Attachments:
    You must be logged in to view attached files.
    March 19, 2021 at 6:00 am #274734

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Hello,

    You are Most Welcome.

    1) Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

    .woodmart-toolbar span.woodmart-cart-number {
    position: absolute;
    left: 10px;
    margin-top: -8px;
}

    2) Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

    .woodmart-toolbar-label {
    font-size: 13px;
}

    Best Regards.

    March 19, 2021 at 3:46 pm #274929

    royberrev
    Participant

    Thanks for the great support Aizaz!

    March 20, 2021 at 5:42 am #274982

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    Most Welcome 🙂

    If you do not mind, can you please leave a 5 stars rating for our Theme & Customer and Technical Support by going here: http://themeforest.net/downloads It will allow us to release more updates and provide dedicated support in future. It would encourage our work a lot. If you like our Theme and Support.

    please, help us improve our theme and servicing by filling the following quiz
    https://8uehqcg4tjy.typeform.com/to/IgyV2EiP
    it won’t take more than 2 minutes of your time 🙂

    Thanks for contacting us.
    Have a great day 🙂

    Topic Closed.
    Best Regards.

  • Author
    Posts

Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Change icon's mobile bottom navbar’ is closed to new replies.