bachemap/templates/nav.html

<nav style="height: auto; align-items: center;">
    <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" style="margin:0; margin-right:5rem; position: relative;">
            <summary aria-haspopup="listbox" role="link" class="secondary" style="transition: transform 0.3s ease;">
            <i style="color:white" class="fas fa-bars"></i>
            </summary>
            <ul role="listbox" style="position: absolute; right: 0; top: 100%; transition: transform 0.3s ease; transform: translateX(0);">
            {% if current_user.is_authenticated %}
                <li><a id="pinner-top" href="#" role="button"><i class="fas fa-plus"></i></a></li>
                <li><a href="/dashboard" role="button"><i class="fas fa-user"></i></a></li>
                <li><a href="/leaderboard" role="button"><i class="fas fa-trophy"></i></a></li>
                <li><a href="/quienes" role="button" class="secondary"><i class="fas fa-info-circle"></i></a></li>
                <li><a href="/logout" role="button" class="secondary"><i class="fas fa-sign-out-alt"></i></a></li>
                {% else %}
                <li><a href="/thelogin" role="button"><i class="fas fa-sign-in-alt"></i></a></li>
                <li><a href="/leaderboard" role="button"><i class="fas fa-trophy"></i></a></li>
                <li><a href="/quienes" role="button" class="secondary"><i class="fas fa-info-circle"></i></a></li>
                {% endif %}
            </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>
        </ul>
    </ul>

    <style>
        @media (max-width: 810px) {
            .desktop-menu {
                display: none;
            }
            #sitename {
                display: none;
            }
        }
        
        @media (min-width: 811px) {
            .mobile-menu {
                display: none;
            }
            #sitename {
                display: block;
            }
        }
        body {
            background-image: url("{{ url_for('static', filename='images/bg-trees.jpg') }}");
            background-size: cover;
        }
    </style>


</nav>

<!-- FAQ button is absolutely positioned -->
<li style="display: block; position: absolute; right: 2rem;bottom:2rem; z-index:1200"><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>