Discussion :

[dhillig]

Bonjour à tous,
Tout d'abord, BONNE ANNEE !!!!
Voilà mon soucis, j'ai un menu shrink auquel j'ai rajouté une image

Code HTML :

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

<a href="#"><img class="logo" src="imgs/logo_cut.png"></a>

Le problème, c'est que cette dernière ne diminue pas lors d'un clic sur le menu
Autre soucis, le logo en position absolute (ou fixed) cale la barre de nav en haut.
Je vous joint toutes les CSS du menu (y'a du monde) :

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
81
82
83
84
85
86
.logo {
	float: left;
	width: 20%;
	margin-top : -20px;
	margin-left : 10px;
	position:absolute;
}
#menutop nav .navbar-nav a {
	display: block;
    color: #fff;
    text-shadow: 0 0 2px #666;
	font-weight: 200;
	padding: 10px 10px 10px 0;
	font-size: 1.4em;
	font-family: 'Roboto', Arial, sans-serif;
}
#menutop nav .navbar-nav a:hover {
    color: #000;
    text-shadow: 0 0 2px #ccc;
}
/* ------------ */
/* navbar-toggler */
#menutop .navbar-toggler {
    background: rgba(150,150,150,0.5); /* GRIS */
}
#menutop .navbar-toggler:hover {
    background: #66ccff; /* BLEU clair */
}
 
/* ------------ */
/* Transitions and class for reduced height */
#menutop, 
#menutop h1, 
#menutop nav .navbar-nav,
#menutop nav .navbar-nav a,
#menutop.menu-shrink {
	-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;
}
/* ------------ */
/* menu-shrink */
#menutop.menu-shrink {
	height: 70px;
	background-color: rgba(255,255,255,0.5);}
#menutop.menu-shrink:hover {
	background-color: rgba(255,255,255,0.5); /* BLANC */
}
#menutop.menu-shrink h1 {
	letter-spacing: -6px;
	font-size: 3em;
	line-height: 0.5em;
}
/* ------------ */
/* Media Queries */
@media screen and (max-width: 991px) {
	#menutop h1 {
		line-height: 30px;
		text-align: left;
	}
	#menutop nav a {
		line-height: 80px;
		text-align: left;
	}
	#menutop nav a {
		margin-bottom: 0;
		margin-top: 0;
	}
	#menutop.menu-shrink nav a {
		line-height: 0;
	}
	#menutop.menu-shrink nav a {
		font-size: 1em;
	}
}
/* ------------ */
@media screen and (max-width: 575px) {
	#menutop nav a {
		font-size: 1em;
			line-height: 20px;}
	#menutop.menu-shrink nav a {
			line-height: 20px;}
	#menutop h1 {
		line-height:120px;
		text-align: left;
		font-size: 30vw;
	}
}

Si vous pouviez m'aider.
Merci infiniment,
DH

[jreaux62]

Bananier 2022,

sans le code HTML associé (et CSS du menu), on ne peut rien tester...
+ quelle version de Bootstrap ?

[dhillig]

Bonjour jreaux62
La version de BOOTSTRAP est la 5.
Ci-joint les css du menu :
Ci-dessous les CSS supplémentaires :

Code :

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

1
2
3
4
5
#menutop {
	position: fixed;
	width:100%;
	top:0; left:0; right:0;
	z-index: 99;

Et le

Code html :

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
		<div id="menutop" class="menu">
			<nav class="navbar navbar-expand-sm p-0 m-0" aria-label="navbar">
			<div class="container-fluid p-0 m-0">
 
				<a href="#"><img class="logo" src="imgs/logo_cut.png"></a>
 
				<button class="navbar-toggler navbar-dark m-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTop" aria-controls="navbarTop" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
 
				<div id="navbarTop" class="collapse navbar-collapse justify-content-end p-1 m-0">
					<ul class="nav navbar-nav px-3">
						<li class="nav-item">
							<a class="scrollTo" href="#section1">Intro</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section2">Sites</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section3">LDDC</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section4">Vidéos</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section5">Photos</a>
						</li>
						<li class="nav-item">
							<a class="scrollTo" href="#section6">Me</a>
						</li>
					</ul>
				</div>
 
			</div>
			</nav>
		</div>

Merci beaucoup et bonne soirée,
DH

[jreaux62]

Le logo logo_cut.png n'est pas sur le site test (lapagetest.fr/imgs) ?

[dhillig]

Je viens de la mettre jreaux

[jreaux62]

Vu.

1- Déjà, comme il est unique, on va remplacer la classe par un id="logotop" :

Code html :

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

				<a href="#"><img id="logotop" src="./imgs/logo_cut.png"></a>

Ce logo remplace le <h1> :

Code html :

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

		<a href="#" class="navbar-brand"><h1 class="p-1 m-0">lddc</h1></a>

2- On se trouve dans un MENU Bootstrap 5 :

• Navbar -> image

-> la SEULE chose qu'il faut faire, c'est définir les dimensions.
Et c'est tout !
(pas de flmoat:left; ni position:absolute)

3- Dans style-lddc.css, ça se passe lignes 250 et 299 (+ ligne 285) :

Code css :

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
/* titre */
#menutop h1 {
	position: relative;
	display: inline-block;
	color: #CCC;
	letter-spacing: -1vw;
	font-size: 16vw;
	line-height: 13vw;
	font-family: 'Raleway', Arial, sans-serif;
}
 
#menutop h1, 
...
 
#menutop.menu-shrink h1 {
	letter-spacing: -6px;
	font-size: 3em;
	line-height: 0.5em;
}

A REMPLACER PAR :

Code css :

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
/* logo */
#menutop #logotop {
	position: relative;
	display: block;
	margin:20px;
	width:20%;
}
 
#menutop #logotop, 
...
 
#menutop.menu-shrink #logotop {
	width:5%;
	min-width:70px;
	margin:0px;
}

N.B. Ton image fait 1400 x 1376 px.
C'est trop.
Tu peux la passer à 350 px de large, c'est suffisant.

[dhillig]

Merci pour le lien mais mon anglais laisse à désirer
Oui pour la taille, je pensais retravailler le png, et attendre d'être certain de la taille.
Maintenant, le logo n'est plus fixe et "chasse" la navbar, et le bouton hamburger
MERCI BEAUCOUP !