Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • March 17, 2015 at 10:41 am #53514
    msyarif
    Participant

    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

    March 17, 2015 at 10:47 am #53515
    msyarif
    Participant

    Image

    March 17, 2015 at 11:11 am #53518
    Sakin
    Keymaster

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

    March 17, 2015 at 12:00 pm #53519
    msyarif
    Participant

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

    March 17, 2015 at 1:11 pm #53522
    msyarif
    Participant

    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

    March 17, 2015 at 7:11 pm #53531
    Sakin
    Keymaster

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

    March 18, 2015 at 9:12 am #53608
    msyarif
    Participant

    @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

    March 18, 2015 at 9:34 am #53611
    Sakin
    Keymaster

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

    March 18, 2015 at 10:14 am #53624
    msyarif
    Participant

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

    March 18, 2015 at 10:18 am #53625
    Sakin
    Keymaster

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

    March 18, 2015 at 10:51 am #53627
    msyarif
    Participant

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

    March 18, 2015 at 12:26 pm #53634
    Sakin
    Keymaster

    @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
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Navigation Slider Prev and Next’ is closed to new replies.