Bonjour à tous ! 

Je viens a vous aujourd'hui avec un problème qui casse mes petits neurones. Mon header, en position relative, est composé d'une vidéo de fond prenant toute la hauteur de la view, d'une section en absolute centrée et d'une navbar qui, pour être honnête, ne marche jamais comme je veux .

En mode Desktop tout vas bien, par contre le responsive de ma navbar est complètement broken(si je peux me permettre) . Lorsque l'écran passe a 768px, les liens disparaissent et un bouton Toggler apparaît, jusque là tout va bien. Le petit soucis c'est que mon Js permettant d'afficher mes liens sous mon logo en cliquant sur le bouton Toggler ne fonction que dans le body. Dans le header rien ne se passe...

Voici quelques extraits de mon code : 

mon header:

<header id="header">
        <div class="container">
            <div id="main-nav">
                <ul class="navbar">
                    <li class="navbar-link navbar-logo">Logo</li>
                    <li class="navbar-link toggle-link"><i class="fas fa-bars"></i></li>
                    <nav class="navbar-item">
                        <li class="navbar-link">link</li>
                    </nav>
                    <nav class="navbar-item align-right">
                        <li class="navbar-link">Link</li>
                        <li class="navbar-link">Link</li>
                        <li class="navbar-link">Link</li>
                        <li class="navbar-link">Link</li>
                    </nav>
                </ul>
            </div>
        </div>
        <video autoplay loop muted>
            <source type="video/mp4" src="./assets/videos/header_background.mp4">
        </video>
        <div id="who-section">
            <h2>Qui sommes nous ?</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est dignissimos illo exercitationem? Nisi, doloribus quae adipisci deleniti quibusdam eveniet voluptatum quam, libero similique ab dolores dolor omnis repudiandae recusandae corporis?</p>
        </div>
        <div id="scroll-button-container">
            <button id="scroll-down-button">
                <i class="fas fa-angle-double-down"></i>
            </button>
        </div>
    </header>

le SASS qui va avec : 

#header {
    
    position: relative;
    height: 100vh;
    width: auto;
    top: 0;
    bottom: 0;
    overflow: hidden;

    .container {
        margin-top: 0;
        border: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    video {
        min-width: 100%;
        min-height: 100%;

        width: auto;
        height: auto;
    }

    #main-nav{
        position: fixed;
        width: 100%;
    }

    .navbar{
        position: relative;
        font-family: 'Coming Soon', cursive;
        font-size: remSize(18px);
        padding: 16px;
        background-color: transparent;
        color: #000;
        max-width: 1600px;
        width: 100%;
    }
    .navbar-item, .navbar-link{
        display: inline-block;
    }
    .navbar-link{
        padding-right: 8px;
    }
    .align-right{
        position: absolute;
        right: 0;
    }
    .toggle-link{
        display: none;
    }
    @media only screen and (max-width: 768px){
        .navbar-item,
        .navbar{
            position: absolute;
        }
        .navbar-item{
            display: none;
        }
        .align-right{
            margin-left: 0; 
        }
        .toggle-link{
            right: 0;
            display: initial;
            position: absolute;
            cursor: pointer;
        }
        .toggle-show{
            display: block;
        }
    }

je n'ai pas mis le reste ( la section et le bouton de scroll )

et le js :

function classToggle() {
    const navs = document.querySelectorAll('.navbar-item')
    
    navs.forEach(nav => nav.classList.toggle('toggle-show'));
  }
  document.querySelector('.toggle-link').addEventListener('click', classToggle);

Voilà ! savez-vous d'où peut venir mon problème  ? parceque je suis desespéré .

Bonjour,

une navbar qui, pour être honnête, ne marche jamais comme je veux

Pour ton code html, on peut parler de coquilles : mettre des balises à la place d'autres

De nombreux outils existent pour valider un code html

Ensuite parler de "responsive" avec des éléments positionnés ...

Bon Week end

David