devigner devigner - 4 months ago 18
HTML Question

Only top half of div nested in anchor is clickable

The basic idea here is I have a font-awesome down arrow inside of a circle div. I want to be able to click the circle and have the page auto-scroll down to just above the circle. Everything about it works except for the fact that only the top half of the circle is clickable. Bootstrap is being used for rows and columns. Browser is Chrome. I'm open to another solution (as long as it's just HTML and CSS) but would also like to know why specifically this bug is occurring.

HTML

<div class="row">
<div class="col-sm-12">
<a name="howitworks" class="HowItWorks__anchor"></a>
</div>
</div>

<div class="row">
<div class="col-sm-12">
<a href="#howitworks">
<div class="HowItWorks__downArrow">
<i class="fa fa-3x fa-angle-down" aria-hidden="true"></i>
</div>
</a>
</div>
</div>


CSS

.HowItWorks__anchor {
position: absolute;
top: -50px;
}

.HowItWorks__downArrow {
color: $white;
background-color: $brand-blue-dark;
height: 50px;
width: 50px;
border-radius: 100%;
text-align: center;
padding-top: 5px;
position: absolute;
bottom: -22px;
left: calc(50% - 25px);
}


Screenshot

Top of splash page, circle div on bottom

Answer

TL;DR: All of the parents need to have a height set equal to the circle div.

Finally got it working. My solution was setting the height of the row div containing the columns div containing the anchor tag circle div to 30px, like so:

HTML

<div class="row">
    <div class="col-sm-12">
        <a name="howitworks" class="HowItWorks__target"></a>
    </div>
</div>

<div class="row HowItWorks__anchorWrapper">
    <div class="col-sm-12">
        <a href="#howitworks">
            <div class="HowItWorks__downArrow">
                <i class="fa fa-3x fa-angle-down" aria-hidden="true"></i>&nbsp;
            </div>
        </a>
    </div>
</div>

CSS

.HowItWorks__target {
    position: absolute;
    top: -50px;
}
.HowItWorks__anchorWrapper {
    height: 30px;
}
.HowItWorks__anchor {
    border-radius: 30px;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    text-align: center;
}
.HowItWorks__downArrow {
    color: $white;
    background-color: $brand-blue-dark;
    height: 50px;
    width: 50px;
    border-radius: 100%;
    text-align: center;
    padding-top: 5px;
    padding-left: 3px;
    position: absolute;
    bottom: -20px;
    left: calc(50% - 25px);
}