Discussion :

[thierrybatlle]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[HiRoN]

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.

[Sparky95]

Salut,

@Hiron: Le css est boostrap

Pour le logo essayes

Code html & boostrap 4 :

Sélectionner tout - Visualiser dans une fenêtre à part

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"><!-- telephone-->
    <img class="d-none d-xs-block" src="../images/Logo_Garage.png" alt="Logo Renaul Dacia"><!-- autre -->
</div>

Liens: https://getbootstrap.com/docs/4.0/utilities/display/


Bonne journée