Add another line to page header in teXt theme

Help
1

Site.title is on the header of all my pages, but description is just a tooltip on the title. How can I display the site.description in the page header (not the HTML ) just below the site title? I’ve tried several things like just putting the description right after the title and with a </br> between them without success. I think the relevant file is _includes/header.html:

{%- if include.theme == 'dark' -%}
  <header class="header header--dark" {%- if include.background -%} style="background: {{ include.background }};" {%- endif -%}>
{%- elsif include.theme == 'light' -%}
  <header class="header header--light" {%- if include.background -%} style="background: {{ include.background }};" {%- endif -%}>
{%- else -%}
  <header class="header" {%- if include.background -%} style="background: {{ include.background }};" {%- endif -%}>
{%- endif -%}
    <div class="main">
      <div class="header__title">
        <div class="header__brand">
          {%- include svg/logo.svg -%}
          {%- assign _paths_root = site.paths.root | default: site.data.variables.default.paths.root  -%}
          {%- include snippets/get-nav-url.html path=_paths_root -%}
          {%- if site.title -%}
            <a title="{%- if site.description -%}{{ site.description }}{%- endif -%}" href="{{ __return }}">{{ site.title }}</a>
          {%- endif -%}
        </div>
        {%- if site.search.provider -%}
          <button class="button button--secondary button--circle search-button js-search-toggle"><i class="fas fa-search"></i></button>
        {%- endif -%}
      </div>
      {%- if site.data.navigation.header -%}
      <nav class="navigation">
        <ul>
          {%- for _item in site.data.navigation.header -%}
            {%- include snippets/get-nav-url.html path=_item.url -%}
            {%- assign _nav_url = __return -%}
            {%- include snippets/get-nav-url.html path=page.url -%}
            {%- assign _page_url = __return -%}
            {%- include snippets/get-string-from-locale-config.html locale=_item.titles -%}
            {%- if _nav_url == _page_url or page.nav_key and _item.key and page.nav_key == _item.key -%}
              <li class="navigation__item navigation__item--active"><a href="{{ _nav_url }}">{%- if _item.title -%}{{ _item.title }}{%- else -%}{{ __return }}{%- endif -%}</a></li>
            {%- else -%}
              <li class="navigation__item"><a href="{{ _nav_url }}">{%- if _item.title -%}{{ _item.title }}{%- else -%}{{ __return }}{%- endif -%}</a></li>
            {%- endif -%}
          {%- endfor -%}
          {%- if site.search.provider -%}
            <li><button class="button button--secondary button--circle search-button js-search-toggle"><i class="fas fa-search"></i></button></li>
          {%- endif -%}
        </ul>
      </nav>
      {%- endif -%}
    </div>
  </header>

The site is https://therailtrails.com.

Or perhaps someone would recommend a more suitable theme.

– From a Jekyll and TeXt theme noob and one unskilled in HTML/CSS

2

A starting point might be something like the following. A Paragraph element works similarly to a BReak:

<a href="{{ __return }}">{{ site.title }}
<p style="margin:0; font-size: 66%">Get outside running, hiking, cycling, walking, or rolling&nbsp;</p>
</a>

Ideally, the CSS styles should be in a custom CSS file, and some work is needed to make it more mobile-friendly, etc.

Hope you get to my local rail-trail, the Black Diamond Trail! :slight_smile:

3

Wonderful! I didn’t realize it would be quite that easy. Thank you!

Thanks for the tip on Black Diamond. I will definitely add it to my list.