bachemap/templates/nav.html

<nav style="height: auto;">
    <ul>
        <a href="/">
            <li style="display: flex; align-items: center;">
                <img id="logo" src="{{ url_for('static', filename='images/bachemapalogo.png') }}" alt="Bachemapa Logo" style="height: 10vh; margin-right: 10px;">
                <h3 style="margin-bottom: 0;" id="sitename"><span style="color: #4a8522;">Bache</span><span style="color: #fa8721;">mapa</span></h3>
            </li>
        </a>
    </ul>

    <ul>
        <!-- Mobile menu toggle -->
        <!-- Mobile menu toggle (only appears on screens less than 600px wide) -->
        <details role="list" dir="rtl" class="mobile-menu">
            <summary aria-haspopup="listbox" role="link" class="secondary">
                <i class="fas fa-bars"></i>
            </summary>
            <ul role="listbox">
                {% if current_user.is_authenticated %}
                <li><a id="pinner-top" href="#" role="button">Agregar</a></li>
                <li><a href="/logout" role="button" class="secondary">Cerrar Sesión</a></li>
                <li><a href="/dashboard" role="button">Perfil</a></li>
                {% else %}
                <li><a href="/thelogin" role="button">Iniciar Sesión</a></li>
                {% endif %}
                <li><a href="/quienes" role="button" class="secondary">Somos</a></li>
                <li><a href="/leaderboard" role="button">Bachistas ★</a></li>
                <li><a style="border-radius: 100%; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; margin-right: 10px; text-decoration: none;" href="/quienes#tengopreguntas"><i style="color:white" class="fas fa-question-circle"></i></a></li>
            </ul>
        </details>

        <!-- Desktop menu (only appears on screens 600px or wider) -->
        <ul class="desktop-menu">
            {% if current_user.is_authenticated %}
            <li><a id="pinner-top-desktop" href="#" role="button">Agregar</a></li>
            <li><a href="/logout" role="button" class="secondary">Cerrar Sesión</a></li>
            <li><a href="/dashboard" role="button">Perfil</a></li>
            {% else %}
            <li><a href="/thelogin" role="button">Iniciar Sesión</a></li>
            {% endif %}
            <li><a href="/quienes" role="button" class="secondary">Somos</a></li>
            <li><a href="/leaderboard" role="button">Bachistas ★</a></li>
            <li><a style="border-radius: 100%; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; margin-right: 10px; text-decoration: none;" href="/quienes#tengopreguntas"><i style="color:white" class="fas fa-question-circle"></i></a></li>
        </ul>
    </ul>

    <style>
        @media (max-width: 715px) {
            .desktop-menu {
                display: none;
            }
            #sitename {
                display: none;
            }
        }
        
        @media (min-width: 716px) {
            .mobile-menu {
                display: none;
            }
            #sitename {
                display: block;
            }
        }
    </style>


</nav>