Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • August 22, 2017 at 1:12 pm #842515
    giaco_he

    Hey guys,

    can you tell me how to position a down arrow on my landing page (https://edley.de)? I tried a few things but I can’t figure it out, so I had to upload my background image with a down arrow, which looks a little bit cheap in my opinion.
    I want the down arrow to look something like this: https://www.google.com/forms/about/

    Pretty basic question but I could not find a solution.

    Thank you!

    Best,

    Giaco

    • This topic was modified 7 years, 2 months ago by giaco_he.
    August 22, 2017 at 2:14 pm #842558
    Victoria

    Hey giaco_he,

    Please refer to this thread for a possible solution.

    If you need further assistance please let us know.
    Best regards,
    Victoria

    August 22, 2017 at 6:49 pm #842704
    giaco_he

    Hi Victoria,

    thank you very much. Unfortunately that didn’t really help since the thread you posted is about a different problem:
    He talks about a down scroll arrow but his problem is that the arrow doesn’t work properly. My problem is that I can’t even find a way to make an arrow show on the slideshow.
    Hope you see what I mean. Thanks again.

    Best,

    Giaco

    August 25, 2017 at 11:48 am #843887
    Victoria

    Hi Giaco,

    Did you use some JavaScript? There is an error in the console.

    Best regards,
    Victoria

    August 25, 2017 at 11:51 am #843888
    giaco_he

    Hi Victoria,

    I don’t think I did.. just made some changes in the Quick CSS but nothing regarding the Slide-Show.

    Best,

    Giacomo

    August 29, 2017 at 11:13 pm #845500
    Basilis

    Hi,

    Have you followed the topic here

    Button/icon to anchor?

    let us know if it works

    Best regards,
    Basilis

    August 30, 2017 at 6:26 pm #845905
    giaco_he

    Hi Basilis,

    yes I have checked this and also this post here, which I think is the same way of solving the problem:
    _____________
    Hi.

    This topic is one year old but today I was also looking for a solution for that problem.
    Here is my solution:

    1) Change the min-height of a section to a small number (e.g. 20px). I did it in the custom.css.
    .avia-section {min-height: 20px;}

    2) Add a color-section after the slider
    no min-height
    no padding
    no border
    with scroll down arrow

    The arrow is diplayed in the slider ;-)
    __________
    I get the second step, however I don’t know how to “Change the min-height of a section to a small number in custom.css.” Could you explain that further?

    Thanks,

    Giaco

    • This reply was modified 7 years, 2 months ago by giaco_he.
    September 2, 2017 at 11:19 pm #847244
    Mike

    Hi,
    Try following step 2, adding a color section below your slider with the scroll down arrow option checked, then add this code in the General Styling > Quick CSS field:

    .scroll-down-link {top: -140px;}

    it will move the scroll down link up to your slider. adjust the number to suit.
    2017-09-02_171217

    Best regards,
    Mike

    September 4, 2017 at 1:41 pm #847711
    giaco_he

    Hey Mike,

    thanks the arrow works. Only thing is that I know have a color section below, how can I hide that?

    Best,

    Giacomo

    September 4, 2017 at 1:57 pm #847719
    Mike

    Hi,
    I believe hiding the color section will also hide the arrow, you could put your elements in the color section, or you could use the full screen slider and check the “Display a scroll down arrow” option.
    2017-09-04_075511

    Best regards,
    Mike

    September 4, 2017 at 2:00 pm #847722
    giaco_he

    Hi Mike,

    thanks for your response. Already tried using the full screen slider, that however changed the image format in a weird way.
    Is it then possible to at least have a very small color section (maybe 1px) and no borders?

    Best,

    Giacomo

    September 4, 2017 at 3:07 pm #847761
    Mike

    Hi,
    I added a code block element with this code:

    <a href="#next-section" title="" class="scroll-down-link" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></a>

    But it the link over shot the next section and went to the next color section.
    So I added a color section with no borders or height and checked show arrow:
    2017-09-04_084540
    I couldn’t make it smaller, so I moved the next section up and made the border of the section transparent with this css:

    #after_section_1.main_color  {border-color: transparent; top: -100px;}

    Best regards,
    Mike

    September 4, 2017 at 5:45 pm #847838
    giaco_he

    Hey Mike,

    that works fine, thank you very much!

    Best,

    Giacomo

    September 4, 2017 at 5:57 pm #847841
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Down arrow’ is closed to new replies.