Home Forums Basel – Premium Template How to make the previous / next buttons always appear.

This topic contains 5 replies, has 3 voices, and was last updated by Elise Noromit Elise Noromit 2 months, 1 week ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #100472

    caiohg123
    Customer

    Hello,

    How to make the previous / next buttons always appear.
    https://uploaddeimagens.com.br/imagens/sem_titulo-jpg-8cb03a8d-9e37-4b89-aae6-f036a3aec94a

    Private Content Hidden
    #100505

    Hi,

    Try to add the following code snippet to the Custom CSS area in Theme Settings.

    body .owl-carousel .owl-nav .owl-prev {
        left: -47px;
    }
    
    body .owl-carousel .owl-nav .owl-next {
    	right: -47px;
    }
    
    body .owl-carousel .owl-nav>div {
        opacity: 1;
    }

    Regards

    #100513

    caiohg123
    Customer

    Hello,

    On the cell phone is not showing the button, would have like to always visible in the mobile phone as well.

    Thank you.

    Private Content Hidden
    #100541

    Hi,

    Try to add the following code snippet to the Custom CSS area in Theme Settings.

    @media (max-width: 1024px) {
    	body .owl-carousel:hover .owl-nav .owl-prev,
    	body .owl-carousel .owl-nav div.owl-prev {
    		left: -20px;
    	}
    	
    	body .owl-carousel:hover .owl-nav .owl-next,
    	body .owl-carousel .owl-nav div.owl-next {
    		right: -20px;
    	}
    }
    
    @media (max-width: 768px) {
    
    body .banners-carousel.owl-carousel .owl-nav, 
    body .product-items.owl-carousel .owl-nav, 
    body .testimonials.owl-carousel .owl-nav {
    	display: block;
    }
    
    body .owl-carousel .owl-nav>div.owl-prev {
    	left: 20px;
    }
    
    body .owl-carousel .owl-nav>div.owl-next {
    	right: 20px;
    }
    	
    }

    Regards

    #100632

    caiohg123
    Customer

    Hi,

    It worked, thank you.

    On the cell phone the button was above the product description.
    https://uploaddeimagens.com.br/imagens/sem_titulo-png-f157e57e-d85e-481a-95c0-3cafb5bb64e9

    Do you have transparent alternative or change button position?

    Private Content Hidden
    #100690

    Hello,

    I recommend putting higher http://prntscr.com/m4htv9 as you see if we make a transparent background-color, navigation is not visible.

    Replace the code for 768px:

    @media (max-width: 768px) {

    
    body .banners-carousel.owl-carousel .owl-nav, 
    body .product-items.owl-carousel .owl-nav, 
    body .testimonials.owl-carousel .owl-nav {
    	display: block;
    }
    
    body .owl-carousel .owl-nav>div.owl-prev {
    	left: 20px;
    	top:20%;
    }
    
    body .owl-carousel .owl-nav>div.owl-next {
    	right: 20px;
    	top:20%
    }
    }

    Best Regards

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

You must be logged in to reply to this topic.