salut et désolé pour le titre j'étais pas inspiré.

j'utilise bootstrap 5.3.

voilà j'ai fais un menu comme ceci:

sur pc:

logo titre           menu central           boutons de thème et langues

sur mobile:

logo faisant office de menu           titre qui renvoi à l'accueil           boutons de thème et langues

jusque là tout va bien, mais c'est quand j'ouvre le menu sur mobile que ça part en sucette, voici le problème:

mon menu s'affiche ainsi sur mobile:

logo faisant office de menu

élément du menu 1

élément du menu 2

élément du menu 3          titre           boutons

élément du menu 4

élément du menu 5

élément du menu 6

au lieu de s'afficher ainsi:

logo faisant office de menu          titre           boutons

élément du menu 1

élément du menu 2

élément du menu 3

élément du menu 4

élément du menu 5

élément du menu 6

voilà maintenant que la partie schéma est finie, voici les codes:

HTML:

<nav class="navbar fixed-top navbar-expand-md bg-body-tertiary">
    <div class="container-fluid">
        <a href="#" class="navbar-brand pointer" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><img src="../static/images/logo-nav.png" alt="Logo" class="d-inline-block align-text-middle img-fluid"></a> <a aria-label="Back to home" class="navbar-brand pointer position-absolute back order-md-first order-sm-first" href="./" title="Retourner à l'accueil">breat.fr</a>

        <div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
            <ul class="navbar-nav">
                <li class="nav-item dropdown active"><a href="#" aria-current="page" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false"><span class="fa fa-home fa-fw" aria-hidden="true"></span>Accueil</a>
                    <ul class="dropdown-menu">
                        <li><a href="messageries-instantanees.php" class="dropdown-item">Messageries instantanées</a></li>
                        <li><a href="reseaux-sociaux.php" class="dropdown-item">Réseaux sociaux</a></li>
                        <li><a href="profils-de-jeux-video.php" class="dropdown-item">Profils de jeux vidéo</a></li>
                        <li><a href="parrainages.php" class="dropdown-item">Parrainages</a></li>
                    </ul>
                </li>
                <li class="nav-item dropdown"><a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">Mods de jeux</a>
                    <ul class="dropdown-menu">
                        <li><a href="/mods/crusader-king-3/" class="dropdown-item">Crusader King III</a></li>
                        <li><a href="/mods/final-fantasy-14/" class="dropdown-item">Final Fantasy XIV</a></li>
                        <li><a href="/mods/imperator-rome/" class="dropdown-item">Imperator Rome</a></li>
                        <li><a href="/mods/master-of-orion/" class="dropdown-item">Master of Orion</a></li>
                        <li><a href="/mods/stellaris/" class="dropdown-item">Stellaris</a></li>
                    </ul>
                </li>
                <li class="nav-item"><a href="/traductions" class="nav-link">Traductions</a></li>
                <li class="nav-item dropdown"><a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">Tutoriels</a>
                    <ul class="dropdown-menu">
                        <li><a href="/tutoriels/developpement-web/" class="dropdown-item">Développement web</a></li>
                        <li><a href="/tutoriels/jeux-video/" class="dropdown-item">Jeux vidéo</a></li>
                        <li><a href="/tutoriels/logiciels/" class="dropdown-item">Logiciels</a></li>
                    </ul>
                </li>
                <li class="nav-item"><a href="contact.php" class="nav-link">Contact</a></li>
            </ul>
        </div>
        <ul class="navbar-nav flex-row position-absolute end-0 justify-content-end order-md-last order-sm-last">
            <li class="nav-item"><a href="javascript:void(0);" class="nav-link pointer" id="theme-switcher"><span class="fa fa-adjust fa-lg fa-fw" aria-hidden="true" title="Changer la couleur du site"></span></a></li>
            <li class="nav-item dropdown">
                <a href="#" class="nav-link pointer" role="button" data-bs-toggle="dropdown" aria-expanded="false"><span class="fa fa-language fa-lg fa-fw" aria-hidden="true" title="Changer de langue"></span></a>
                <ul class="dropdown-menu dropdown-menu-end dropdown-sm-end position-absolute">
                    <li>
                        <a href="javascript:void(0);" class="dropdown-item" onclick="switchLanguage('fr');"><img src="../static/images/drapeau-france-menu.png" class="img-fluid" loading="lazy" alt="Français"> Français</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" class="dropdown-item" onclick="switchLanguage('en');"><img src="../static/images/drapeau-royaume-uni-menu.png" class="img-fluid" loading="lazy" alt="English"> English</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

CSS:

@media (min-width: 768px) {
    /* ma petite bidouille pour le placer sur pc */
    .back {
        margin-left: 40px;
    }}

pour le reste du css c'est bootstrap 5.3 et fork awesome 1.2.

quelqu'un pourrais m'aider à fixer une bonne fois pour toutes mon titre et mes 2 boutons en haut sur mobile sans changer le reste du design ?

ça fait des jours que je m'arrache les cheveux là dessus alors que je suis presque sûr que c'est tout bête