Change icon's mobile bottom navbar

This topic has 7 replies, 2 voices, and was last updated 3 years, 8 months ago by Aizaz Imtiaz Awan.

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

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
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
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

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