I'm getting this really weird problem where the <img> stored inside an <a> tag is not clickable whenever I place it within a certain region i.e. within a certain height.
After a bit of debugging, I found out the removing the text Hi, I'm XYZ (not the containing h2 tag!) seems to make the problem go away.
I also found out that moving the links up and down (with the text still there) makes the links work.
I've tested with other window widths as well, and the links seem to work for all of them except when the window width is between 500px - 550px.
Below is the HTML:
<body>
<div class="section-header">
<div class="container">
<div class="row">
<div class="six columns nav-bar-title">
<center>
<a href="/">
<h3>xyz.</h3>
</a>
</center>
</div>
<div class="six columns nav-bar-links">
<center>
<span class="ext_link">
<a href="#" target="_blank">
<img src="{{ url_for('static', filename='img/logos/github-logo.svg') }}" onmouseover="this.src='{{ url_for('static', filename = 'img/logos/github-logo-hover.svg') }}';" onmouseout="this.src='{{ url_for('static', filename = 'img/logos/github-logo.svg') }}';" title="Github">
</a>
</span>
<span class="ext_link">
<a href="#" target="_blank">
<img src="{{ url_for('static', filename='img/logos/linkedin-logo.svg') }}" onmouseover="this.src='{{ url_for('static', filename = 'img/logos/linkedin-logo-hover.svg') }}';" onmouseout="this.src='{{ url_for('static', filename = 'img/logos/linkedin-logo.svg') }}';" title="LinkedIn">
</a>
</span>
<span class="ext_link">
<a href"#" target="_blank">
<img src="{{ url_for('static', filename='img/logos/twitter-logo.svg') }}" onmouseover="this.src='{{ url_for('static', filename = 'img/logos/twitter-logo-hover.svg') }}';" onmouseout="this.src='{{ url_for('static', filename = 'img/logos/twitter-logo.svg') }}';" title="Twitter">
</a>
</span>
</center>
</div>
</div>
</div>
</div>
<div class="container">
<div class="title-container row">
<div class="twelve columns"><center><h2 class="title">Hi, I'm XYZ.</h2></center></div>
</div>
</div>
And the CSS:
body{
font-family: 'Raleway', sans-serif;
color: #ffffff;
background-color: #393f4d;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
a{
text-decoration: none;
}
.nav-bar-title{
position: relative;
top: 1rem;
}
.nav-bar-title h3{
font-size: 4rem;
}
.nav-bar-title a{
text-decoration: none;
color: white;
}
.nav-bar-title a:hover{
text-decoration: none;
color: #feda6a;
}
.nav-bar-links
{
position: relative;
top: 5rem;
}
.ext_link
{
margin: 2rem;
}
.title-container
{
position: relative;
top: 20rem;
width: 100%;
}
I'm pretty sure I must be doing something stupid. Any help would be appreciated!