Navigation Arrows in All Product Related Elements

This topic has 5 replies, 2 voices, and was last updated 6 months ago by Aizaz Imtiaz Awan.

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

Author

Posts
June 7, 2024 at 1:54 pm #571309

marketing-3503
Participant

Hi there, i hope you are doing well.

I would like to change the colour and style of the arrows only on product carsouel elements and ajax elements of products that use arrows.

I attached a screenshot of what I would like but basically it is a small background box to make the arrows stand out a bit more – the bix should be small and width should be small as well so that on mobile screens it is still easily viewable.

I tried searching the forum and I found some codes but they do not work that well for my site.

I attached a screenshot as an example.

Thanks team!

Attachments:
You must be logged in to view attached files.

June 7, 2024 at 3:47 pm #571357

Aizaz Imtiaz Awan
Keymaster

Hello,

Sorry to say i have not seen an arrow on product grid or carousel widgets on the home page on your site. Please try to enable the pagination arrow on your site . So I will check and give you a possible solution.

Best Regards.

June 10, 2024 at 12:44 pm #571731

marketing-3503
Participant

Hi there, thanks for the quick response. This is the page link – https://dev.gymstore.co.za/wp-admin/post.php?post=36167&action=elementor

June 10, 2024 at 2:15 pm #571745
Aizaz Imtiaz Awan
Keymaster
Hello,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:
```
.wd-arrow-inner{
    background-color: black !important;
    border-radius: 30px !important;
}
```
Best Regards.
June 11, 2024 at 2:19 pm #572015

marketing-3503
Participant

Hi there, thanks for this. Did you see my initial screenshot I shared? The arrow background can’t simply be round as it takes up too much space on mobile. Please refer to my preferred shape and size with he screenshot.

Please also note, when the background is black the background should be white and vice-versa. Same for the arrow inside the navigation arrows.

Thank you!

Attachments:
You must be logged in to view attached files.

June 11, 2024 at 3:50 pm #572048
Aizaz Imtiaz Awan
Keymaster
Hello,

Please remove the previous code and add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS. Change the value as per your requirements.
```
.wd-arrow-inner{
    background-color: black !important;
    border-radius: 5px !important;
    height: 50px !important;
    width: 40px !important
}
.wd-arrow-inner:after {
    font-size: var(--wd-arrow-icon-size, 20px) !important;
}
```
Best Regards.
Author

Posts