Discussion :

[pierrot10]

Bonjour à tous,

Je fais un site avec Bootstrap3.
J'aimerais que mon menu soit toujours fermé. Pour cela, j'ai ajouté ceci dans mon fichier CSS

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
@media (max-width: 2000px) {
 
	.navbar{
		position: absolute;
 
 
	}
 
	.navbar-default .navbar-toggle .icon-bar {
		background-color: #b89c92;
	}
  .navbar-default{
  	background-color: inherit; !important;
  	border:0px;
  }
 
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border: 0px;
 
}
 
 
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
      float:left;
      border-color: #b89c92 !important;
/*      background-color: #b89c92 !important;*/
  }
    .navbar-toggle:hover {
      background-color: #ead1a5 !important;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
      padding-left:0px;
      padding-right:0px;
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      /*margin-top: 7.5px;*/
      background-color: #ead1a5 !important;
      padding:2px 5px 2px 5px;
      border-radius: 4px;
  }
  .navbar-nav>li {
      float: none;
      margin-left:0px;
  }
  	.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover{
		background-color: inherit;
	}
 
  .navbar-nav>li>a {
      padding-top: 2px;
      padding-bottom: 2px;
      padding-left: 2px !important;
      padding-right: 2px !important;
  }
  .navbar-nav>li>a:hover{
  	color: #ffeac5 !important;
  }
 
  .collapse.in{
      display:block !important;
  }
}

Ca fonction, sauf que lorsque je diminue mon navigateur et que j'atteinds la taille du smartphone, le menu "bouge". En fait, mon CSS, ci-dessus, est remplacé par le CSS de bootrap qui agit au moment ou le navigateur passe en mode smartphone

The markup for 3.1 has changed slightly and the navbar is always mobile-first.

J'aimerais bien savoir comment je peux faire pour que mon code ci-dessus, agisse tout le temps, quelque soit le devise?

J'ai essyé de remplacé

Code :

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

@media (max-width: 2000px) {

par

Code :

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

@media screen and (min-width: 10px) and (max-width: 2000px) {

sans succès.

Que pourriez-vous me proposer?

Milles mercis

[Mell]

Qu'est-ce que tu appelles avoir toujours le menu fermé ?
Tu veux que ton menu soit géré avec une icône hamburger dès le départ ?

[pierrot10]

Salut Mel,
Oui excatement. J'aimerais bien que mon menu soit toujours fermé. Donc un menu à Hamburger

[Mell]

Juste pour information (et qui rendra plus simple la résolution de ton problème), est-ce que tu utilises sass ou tu fais du css basique ?

Si non, cette page résout ton problème https://stackoverflow.com/questions/...l-screen-sizes
Par contre, le CSS que tu as déjà appliqué risque de poser problème. A toi de voir pour faire fonctionner tout ça