Alternierende Navigationselemente mit CSS

Bei einem anderen Blogprojekte verwende ich ein Theme, das auf einem zweispaltiegen Layout aufbaut. Das Theme ist responsiv, es nimmt also abhängig von der Größe des Darstellungsfensters eine andere Struktur an, in meinem Fall bei schmalem Screen ein einspaltiges Layout statt eines zweispaltigen. Nun ist es so, dass im zweispaltigen Layout im Menübereich jeweils eine Liste mit Kategorien und Tags anzeigt werden, die ich im einspaltigen Layout wegen ihrer Position über dem Inhalt nicht mehr anzeigen möchte. Andernfalls müsste der User zu lange scrollen, um beim eigentlichen Inhalt anzukommen.

Nach etwas ratlosem Rumprobieren und CSS-Doku lesen bin ich über das display-Property gestolpert. Damit konnte ich dann etwas umständlich, da ich die Klasse sowohl an der Überschrift als auch an der Liste anhängen musste, die längeren Teile verstecken:

@media (max-width: 800px) {
  .horizontal { display: none; }
}

{% if DISPLAY_CATEGORIES_ON_MENU and categories %}
    <h2 class="horizontal">Kategorien</h2>
    <ul class="navbar horizontal">
        {% for cat, null in categories %}
            <li{% if cat == category %} class="active"{% endif %}>
                <a href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a>
            </li>
        {% endfor %}
    </ul>
{% endif %}

display: none ist in diesem Fall visibility: hidden vorzuziehen, da so vermieden wird, dass die versteckten Elemente Platz im Layout belegen. Siehe dazu auch den Abschnitt Hide an Element - display:none or visibility:hidden auf der Seite der W3school.

Als das Verstecken funktioniert hat, kam auch schnell die Idee auf, im einspaltigen Layout etwas Anderes anzeigen zu lassen. Daher habe ich ein inverses media-Tag erstellt und damit die Menüeinträge dekoriert:

@media (min-width: 801px) {
  .vertical { display: none; }
}

<nav class="nav">
    <ul class="list-bare">

        {% for title, link in MENUITEMS %}
            <li><a class="nav__link" href="{{ link }}">{{ title }}</a></li>
        {% endfor %}

        {% if DISPLAY_PAGES_ON_MENU and pages %}{% for p in pages %}
            <li><a class="nav__link" href="{{ SITEURL }}/{{ p.url }}">{{ p.title }}</a></li>
        {% endfor %}{% endif %}

        {% if DISPLAY_CATEGORIES_ON_MENU and categories %}
            <li class="vertical"><a class="nav__link" href="/categories.html">Kategorien</a></li>
        {% endif %}

        {% if DISPLAY_TAGS_ON_MENU and tags %}
            <li class="vertical"><a class="nav__link" href="/tags.html">Tags</a></li>
        {% endif %}
    </ul>
</nav>

Funktioniert prima. Ich bin mir zwar nicht sicher, ob das korrektes und sinnvolles CSS ist und ob man dies eigentlich anders macht, daher bin ich über Hinweise immer dankbar. Was mich noch ein wenig ärgert ist die doppelte Verwendung der horizontal-Klasse für Überschrift und Liste. Ich muss noch mal tiefer in die CSS-Doku eintauchen um zu sehen, ob man dies nicht auch eleganter lösen kann.