[msyarif]

hi wanna ask about nav arrow, it different from image on website (catch Kathmandu) and file downloaded (or live demo). How to fix it? pic.twitter.com/NGKwUMGEBv

[msyarif]

[Sakin]

@msyarif: It’s strange why you have different arrow. Can you send me your site URL so that I can check in.

[msyarif]

i just dowload it, still in my localhost, you check in http://catchthemes.com/demo/catch-kathmandu/

i think the problem is in;

<div id=”slider-nav”>
<
>
</div>
<
>

[msyarif]

i like the top (image on prev post) as arrow slider than the bottom (image) one. the top image position left n right arrow on middle image and look bigger and stylist also looks great n minimalist.

but how can i change slide arrow like the top image?

please help

[Sakin]

@msyarif: Sorry my question where did you see the top image with arrow on middle left and right of slider. Are you trying to make that or you have seen it in our site.

[msyarif]

@sakin saw it on http://catchthemes.com/themes/catch-kathmandu-pro/ , and i want make position arrow navigation on that position (on middle left and right of slider).

image from catchthemes

or this link

try with standard catch theme, but the position never perfect, below link is max i can do. link

[Sakin]

@msyarif: oh my god that is why I was totally lost. That is different. This is form our site CSS http://catchthemes.com/themes/catch-kathmandu-pro/

Every theme is designed in different way. Even out themes have different position arrow. For this theme, you might need to add the following css in “Appearance => Theme Options => Custom CSS” box.

#slider-nav { bottom: 50%; right: 0; width: 100%; }
.slide-previous { position: absolute; left: 0;  }
.slide-next { position: absolute; right: 0;  }

I hope this work, if not then we need to change the code level for that you need hire developer.

[msyarif]

great thanks, now in the middle. but the arrow better using in image on http://catchthemes.com/themes/catch-kathmandu-pro/

[Sakin]

@msyarif: This is from Genericon and that is from custom image. So, it will be different.

[msyarif]

can i change it with image.png ? or with this below code? the arrow looks like on http://catchthemes.com/themes/catch-kathmandu-pro/

.nav-arrows span {
position: absolute;
z-index: 2000;
top: 50%;
width: 40px;
height: 40px;
border: 8px solid #ddd;
border: 8px solid rgba(150,150,150,0.4);
text-indent: -90000px;
margin-top: -40px;
cursor: pointer;

-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

.nav-arrows span:hover {
border-color: rgba(150,150,150,0.9);
}

.nav-arrows span.nav-arrow-prev {
left: 5%;
border-right: none;
border-top: none;
}

.nav-arrows span.nav-arrow-next {
right: 5%;
border-left: none;
border-bottom: none;
}

[Sakin]

@msyarif: Yes you can do in anyway you like. CSS and Custom png both will work. For css, it can be as below. But it all depends on your need.

#slider-nav { bottom: 50%; right: 0; width: 100%; }
.slide-previous { position: absolute; left: 5%;  }
.slide-next { position: absolute; right: 5%;  }
#slider-nav a { font-size: 40px; }
#main-slider:hover #slider-nav a, #main-slider #slider-nav a:hover { background: none transparent; color: #fff; }

[Author]

Posts