[HTML 5] Mise en forme responsive

Mise en forme responsive

Bonjour à tous,

Je suis en train de faire un petit site responsive avec Bootsrap.
Je souhaite créer une entête de page que je vais insérer dans toutes les autres.

Mon problème est je souhaiterai dans le format smartphone afficher une image plus petite et le menu hamburger juste dessous et centré.
Par ailleurs je n'arrive pas à centrer verticalement le menu principal ce situant à droite de l'image sur les résolutions plus grandes.

Mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
 <header>
 
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <img src="../images/Logo_Garage.png" alt="Logo Renaul Dacia">
                </div>
                <div class="col-xs-4">
                    <img src="../images/Logo_Garage_Petit.png" alt="Logo Renaul Dacia">
                </div>
                <!-- Menu -->
                <div class="col-md-8">
                    <nav class="navbar navbar-default" >
                        <div class="container-fluid">
                           <div class="navbar-header">
                              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>                        
                              </button>
                            </div>
                        </div>   
                        <div class="collapse navbar-collapse" id="myNavbar">
                            <ul class="nav navbar-nav">
                                <li><a href="#" class="lienFooter">Accueil</a></li>
                                <li><a href="#" class="lienFooter">Nos occasions</a></li>
                                <li><a href="#" class="lienFooter">Voitures neuves</a></li>
                                <li><a href="#" class="lienFooter">Nous contacter</a></li>
                            </ul>
                        </div>
                    </nav>
                </div>
                <!-- Fin menu -->
            </div>
 
        </div>
        <br>
        <div class="ligne"></div>
 
 
    </header>

Je vous remercie de votre aide

Bonjour,

Pour bien t'aider, il faudrait donner le code CSS associé.

Pour le logo, perso, je mettrais un ID à chacun des blocs contenant les logos (petit & grand) et via des media queries, j'afficherai l'un ou l'autre en fonction de la résolution de l'utilisateur.
Pour le reste, comme dit, sans le CSS associé, difficile à dire comme ça.

Salut,

@Hiron: Le css est boostrap ;)

Pour le logo essayes
Code:

1 2 3 4 5 <div class="col-md-4"> <img class="d-xs-none" src="../images/Logo_Garage_Petit.png" alt="Logo Renaul Dacia"> <img class="d-none d-xs-block" src="../images/Logo_Garage.png" alt="Logo Renaul Dacia"> </div>
Liens: https://getbootstrap.com/docs/4.0/utilities/display/

Bonne journée