[arefsParticipant]

It’s quite difficult to clearly explain what I’m looking to do in words.

So it’s easier if I just show you an example.

Go to – http://www.netmark.com/

Notice how the break between sections contains an arrow pointing down. I want to do this for specific sections on my website. Not the whole website. Just specific sections

See this screenshot if you still don’t understand what I mean here – https://dl.dropboxusercontent.com/u/17713251/2016-01-02_14-36-50.jpg

I found the following code from another forum post. I’ve added it to my website, added the correct class but it doesn’t work:

.x-content-band.down-arrow {
position: relative;
}

.x-content-band.down-arrow .x-container-fluid {
position: static;
}

.x-content-band.down-arrow .x-container-fluid:before {
content: “”;
display: block;
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;

Can you help.

My website is in the following post.

I’ve trying to do this for the section break between “Why client’s choose us” and “you name it, we’ve got it”.

Thanks.

[arefsParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for writing in! The code you have is meant only to pages created with Visual Composer. Since you have used Cornerstone in creating your page, simply sue this code instead;

.x-section.down-arrow {
   position: relative;
}

.x-section.down-arrow:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    margin-left: -40px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 40px 0 40px;
    border-color: #f3f3f3 transparent transparent transparent;
}

http://prntscr.com/9l4kag

We would loved to know if this has work for you. Thank you.

[arefsParticipant]

I’ve added your code to my site. However, all that is displaying is a black box where the arrow should be.

Can you take a look?

Thanks.

[Rue NelModerator]

Hello There,

It is displaying a block box because you haven’t added a border color. Please add this line as well

border-color: #f3f3f3 transparent transparent transparent;

Thank you.

[arefsParticipant]

That’s better. However, I’m a little confused.

I want to add the arrow beneath the phrase “but that’s not all”. Currently it’s in the wrong place – at the top of the section and not where I want it which is at the bottom of the same section.

I’ve tried adding the class down.arrow a whole variety of different sections, rows, column etc… but can’t seem to move arrow from where it is to where I want it to be.

Can you help?

[Rue NelModerator]

Hello There,

Please use underscore or dash. A period is not allowed in the class section. You can use down-arrow instead and use this custom css in the settings tab, Settings > Custom CSS

.x-section.down-arrow {
   position: relative;
}

.x-section.down-arrow:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    margin-left: -40px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 40px 0 40px;
    border-color: #0e3f7a transparent transparent transparent;
}

Please let us know if this works out for you.

[arefsParticipant]

Thanks. But which class box do I add the class name???!!!

I’ve tried every box in every section, row, column and can’t get it to display 🙁

[Rue NelModerator]

Hello There,

Based on the screenshot that I shared in my previous reply, the class down-arrow has been applied to the 5th section.
Please see it here: http://prntscr.com/9l4v2m

Hope this helps.

[arefsParticipant]

OK – thanks.

Now all I need to do is make the arrow the same color as the 4th section. But I see no color code in the CSS you gave me to change the color.

Can you help?

[Rue NelModerator]

Hello There,

To have same color with the background color of section 4, please update the given css code using this one:

.x-section.down-arrow {
   position: relative;
}

.x-section.down-arrow:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    margin-left: -40px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 40px 0 40px;
    border-color: #0e3f7a transparent transparent transparent;
}

Thank you.

[arefsParticipant]

Thank you!

[Rue NelModerator]

Don’t mention it.
Always happy to help you.

[salt_pepperParticipant]

Hi there,

I’ve got trouble to add the section arrow. I’d like to have it on the homepage at the end of x-section-2. I also added the above mentioned custom css. However I don’t understand what exact code I need to add in the specific section.

Assistance is much appreciated. Thanks.

[salt_pepperParticipant]

This reply has been marked as private.

[Author]

Posts