Search Knowledge Base by Keyword

Arrow Positioning

You are here:
< Back

All Code examples should be put in your child theme back up your website before attempting any modifications.

 

  1. Is there a way to move the arrow to the right or left instead of the center?
  2. Does the arrow also point in other directions? I want to use it to point to the right.
  3. Can I have the arrow on a specific area on my website?

Is there a way to move the arrow to the right or left instead of the center?


Yes you can but with some customization if you put this code in your child theme you can move the arrow to the left or right.

.echo-content-down-arrow {
left: 88% !important;
}

This will move it to the right of the screen.


Does the arrow also point in other directions? I want to use it to point to the right.


By default the arrow does not point in other directions. However you can use this code to point to different directions.

#ep-arrow {
transform: rotate(-93deg);
}

This will point it to the right of the screen. Play with the degree and the arrow will automatically point and bounce in that direction! Any direction you wish!


Can I have the arrow on a specific area on my website?


No, by default the arrow is centered to the page. However with some css customization you can technically set the arrow to different sections.

First you need to set the parent elements positioning to relative. You will need to find out the parent class, ID or tag and target it. Let’s say your class is called “testimonials” Here is the code for that.

.testimonials {
position:relative;
}

Then we need to set the arrow class absolute positioning, and use the bottom ,left in this example to move it around that area.

.echo-content-down-arrow {
position: absolute !important;
bottom: 0 !important;
left: 50%!important;
}

For more information about positioning please read more here.


Table of Contents