Theme's layout customization. Showing both of title and logo on the header

Hello Everyone,

I am a complete stranger to markup languages. So, I look for help to customize the theme named, “Forty”. I want both title and logo to appear at the top of my page. Since there is an ‘if’ fucntion used in nav.html only one of them appears at a time. The code which I think is related to the issue is as follows:

{{ "<!-- Header -->" | safeHTML }}
    <header id="header" class="alt">
        <a href="{{ .Site.BaseURL }}" class="logo">{{ if .Site.Params.Navigation.logo }}<img src="{{ .Site.Params.baseURL }}/img/{{ .Site.Params.Navigation.logo }}" alt="" />{{ else }}
        <strong>{{ .Site.Params.Navigation.title }}</strong> <span>{{ .Site.Params.Navigation.subtitle }}</span>{{ end }}</a>
        <nav>
            <a href="#menu">{{ .Site.Params.Navigation.menu }}</a>
        </nav>
    </header>

Update:

Removed some code and it worked.

<header id="header" class="alt">
    <a href="{{ .Site.BaseURL }}" class="logo"><img src="{{ .Site.Params.baseURL }}/img/{{ .Site.Params.Navigation.logo }}" alt="" />
    <strong>{{ .Site.Params.Navigation.title }}</strong> <span>{{ .Site.Params.Navigation.subtitle }}</span></a>
    <nav>
        <a href="#menu">{{ .Site.Params.Navigation.menu }}</a>
    </nav>
</header>
1 Like

The <a> tag was wrapping an {{ if }} statement. If you put breaks in, you can see the {{ if sometest }}result-if-true{{ else }}result-if-false{{ end }} structure and more easily decide on any change.

<a href="{{ .Site.BaseURL }}" class="logo">
{{ if .Site.Params.Navigation.logo }}
<img src="{{ .Site.Params.baseURL }}/img/{{ .Site.Params.Navigation.logo }}" alt="" />
{{ else }}
<strong>
{{ .Site.Params.Navigation.title }}</strong> <span>{{ .Site.Params.Navigation.subtitle }}</span>
{{ end }}
</a>

That lets you not set the logo, and still get something.

Check out {{ with }} in the docs, too.

Thanks for the tip Rick. I will keep it in mind

1 Like