Author no longer appears on blog post; coding issue

[bstock98]

I am having an issue with my blog post template, more specifically a custom module for the blog banner. The banner was a color background before, but after changing the background to an image the blog author no longer appeared in the banner.

Below is the code (HUBL/HTML)  for the custom module:

{% if is_listing_view %}
<div class="banner-area" style="background-image:url();">
<div class="banner-image content-fill">
<img src="//cdn2.hubspot.net/hubfs/4515283/SignumBiosciences_July2018%20Theme/Images/SITE-EXPORTS_0012_FULLBLEED-02.jpg" alt="Banner Image">
</div>
<div class="page-center">
<h1>{{ group.public_title }}</h1>
</div>
</div>

{% else %}
<div class="banner-area" style="background-image:url();">
<div class="banner-image content-fill">
<img src="https://cdn2.hubspot.net/hubfs/4515283/COVER%20IMAGES/SITE-EXPORTS_0009_ELEMENTS%20Glass.jpg" alt="Banner Image">
</div>
<div class="page-center">
<h1>{{ content.name }}</h1>
<p class="date-sec">{{ content.publish_date_local_time.strftime('%b') }} {{ content.publish_date_local_time.strftime('%d') }}, {{ content.publish_date_local_time.strftime('%Y') }}</p>
<div class="banner-author">
<span class="hs-author-label">by</span>
{% if content.blog_post_author %}
<a class="author-link" href="{{ blog_author_url(group.id, content.blog_post_author.slug) }}">{{ content.blog_post_author.display_name }}</a>
{% endif %}
</div>
</div>
</div>
{% endif %}

The section in orange is the new piece of code I inserted, which seems to be causing the problem.

Please let me know if there is anything else that I need to include about the issue to help. Any helpful tips would be greatly appreciated.

Thank you!

[tjoyce]

can you post a link to the preview URL so we may look at the frontend code. It might not be a HUBL issue.

[bstock98]

Here is the preview:

http://blog.signumbiosciences.com/thescienceofstayinghealthy/nerium-get-real-2018?hs_preview=BbVfsjG...

[tjoyce · Accepted solution]

@bstock98 - As suspected, the HUBL is fine and the author code is actually there, it's just being rendered behind the background image. I added the following css to the author's <a> tag and it appeared:

position:absolute;
z-index:99999;

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[bstock98]

Thank you so much! That made the text appear again, but now I have one final issue. 

The author and date now scroll over the nav bar rather than going under like the post title. I couldn't see anything obvious in the css for the post title that makes it scroll underneath. 

Any Ideas?

I really appreciate the help!

[bstock98]

Nevermind I figured it out. The z-index was too high, which placed it above the navbar.