Discussion :

[leara500]

Bonjour (ou peut être bonsoir)

J'ai créé un Menu sous Worpress. On me demande qu'un item du Menu soit séparé des autre items. Pour cela, il doit se trouver tout à gauche :



Pour obtenir ce résultat, j'ai créé un lien vide et j'ai écrit plusieurs fois  



La difficulté de cette "solution" c'est qu'en fonction de l'ordinateur, le dernier item peut se retrouver à la ligne.

Auriez vous une solutions plus pérenne ?

Merci beaucoup de votre aide

[SpaceFrog]

Attribue un classname différent a ton item de menu et colles lui le bon css ...

[leara500]

Merci beaucoup pour votre réponse.

Pour être honnête, le css n'est pas ma tasse de thé. Comment fait-on pour lui attribuer un classname différent a l'item du menu et lui mettre le bon CSS ?

Je vous avoue en toute franchise que cela fait très longtemps que je n'ai géré un site worpress et que mes bases en CSS remonte à trèèèèèèèès long.


Merci infiniment de votre aide

Cordialement


PS : Le fichier style.css dans lequel est le menu est :

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
 
 
/*--------------------------------------------------------------
5.3 Menus
--------------------------------------------------------------*/
 
 
.main-navigation {
    margin-top: 11px;
}
.main-navigation {
    border-top: 3px double #ddd;
     border-bottom: 3px double #ddd;
}
.main-navigation:before, .main-navigation:after {
    clear: both;
    content: "";
    display: block;
}
.main-navigation ul {}
.main-navigation ul ul {
    border: 1px solid #dddddd;
    display: none;
    left:10px;
    margin: 0;
    min-width: 200px;
    position: absolute;
    top: 32px;
    z-index: 9999;
}
.main-navigation ul ul ul {
    left:100%;
    top: -1px;
}
 
 
.main-navigation li {
    position: relative;
    display: inline-block;
}
.main-navigation li li {
    float: none;
    display: block;
}
.main-navigation li li li {}
.main-navigation li li li li {}
.main-navigation li:hover ul{
    display: block;
}
.main-navigation li:hover li ul{
    display: none;
}
.main-navigation li li:hover ul{
    display: block;
}
.main-navigation li li:hover li ul{
    display: none;
}
.main-navigation li li li:hover ul{
    display: block;
}
.main-navigation li li li:hover li ul{
    display: none;
}
.main-navigation li li li li:hover > ul{
    display: block;
}
.main-navigation ul li a {
    color: #6f6f6f;
    display: block;
    font-family: Open Sans;
    font-size: 18px;
    margin-right: 3px;
    padding: 4px 5px;
    position: relative;
    text-transform: uppercase;
    z-index: 99;
	 font-weight: bold;
	width : 100%;
}
.main-navigation li li li a {}
.main-navigation li li li li a {}
.main-navigation .current_page_item a,
.main-navigation .current-menu-item a {
    color: #1098f8;
}
 
.main-navigation ul li li:after{
  display: none;
}
 .main-navigation li.current-menu-item:after,
  .main-navigation ul li.current_page_item:after {
    width:100%;
   }
 
.main-navigation li li.current_page_item a:after, .main-navigation ul li li a:hover:after {
    display: none;
}
 
.main-navigation li li a:hover, .main-navigation li li.current-menu-item > a {
 
}
.main-navigation li li li a:hover {}
.main-navigation li li li li a:hover {}
.main-navigation li.current-menu-item > a {
 
}
.main-navigation li li.current-menu-item > a {}
.main-navigation li li li.current-menu-item > a {}
.main-navigation li li li li.current-menu-item > a {}
.main-navigation li.current-menu-item li a:hover {}
.main-navigation li li.current-menu-item li a:hover {}
.main-navigation li li li.current-menu-item li a:hover {
  color:#1098f8;
}
 
 
.main-navigation ul ul a {
    border-bottom: 1px solid #dddddd;
    font-size: 15px;
    height: auto;
    padding: 7px 15px;
    text-align: left;
	text-transform: capitalize;
    width: 100%;
}
.main-navigation ul li ul li a:hover {
    background-color: hsla(0, 0%, 0%, 0.15);
    color: hsl(0, 0%, 100%);
}
.main-navigation > ul li.menu-item-has-children > a,
.main-navigation > ul li.page_item_has_children > a {
    padding-right: 35px;
}
.main-navigation > ul > li:first-child > ul,
.main-navigation > .menu > ul > li:first-child > ul {
    left: 0;
}
a {
    color: #38547d;
}
a, h1 a, h2 a, h3 a, h4 a {
    color: #38547d;
}
.main-navigation > ul > li:first-child > a,
.main-navigation > ul.menu > li:first-child > a,
.main-navigation > .menu > ul > li:first-child > a{
  padding-left: 0;
}
.main-navigation ul li.menu-item-has-children > ul > li.menu-item-has-children > a:before,
.main-navigation ul li.page_item_has_children > ul > li.page_item_has_children > a:before  {
    content: "";
    display: block;
    font-family: FontAwesome;
    font-size: 22px;
    position: absolute;
    right: 10px;
    top: 3px;
}
.main-navigation ul li.menu-item-has-children > a:before,
.main-navigation ul li.page_item_has_children > a:before
{
    color: #c2c2c2;
    content: "";
    display: block;
    font-family: FontAwesome;
    font-size: 24px;
    position: absolute;
    right: 2px;
    top: -1px;
}
.main-navigation ul li.menu-item-has-children > ul > li.menu-item-has-children > a:hover:before,
.main-navigation ul li.page_item_has_children > ul > li.page_item_has_children > a:hover:before {
    color: #ffffff;
}
#page > a#mobile-trigger {
    display: none;
}

[SpaceFrog]

Jette un oeil par là :
https://lorelle.wordpress.com/2015/0...s-positioning/

[leara500]

Merci beaucoup pour votre aide et votre réponse.

Je l'avoue, j'ai du mal avec le CSS. J'ai pris le temps de lire la dos mais je n'ai tout compris

J'ai modifié le code auquel est rattaché le menu

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.main-navigation ul li a {
    color: #6f6f6f;
    display: block;
    font-family: Open Sans;
    font-size: 18px;
    margin-right: 3px;
    padding: 4px 5px;
    position: relative;
    text-transform: uppercase;
    z-index: 99;
	font-weight: bold;
	width : 100%;
	float:left;
}

en rajoutant float : left, mais cela n'a pas marché.

Pourriez vous m'aider en explicitant en peu plus vos explications

Merci d'avance

[mathieu]

le rendu dépend de tout ce qui est sur la page donc pour mieux vous aider, il nous faudrait l'url pour pouvoir tester directement.

[leara500]

Merci beaucoup pour votre aide

l'url du site est : https://www.maisonpaulrabaut.org/

Merci encore

[mathieu]

dans l'espace d'administration -> Apparence -> Personnaliser -> CSS additionnel, ajoutez ce code :

Code css :

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

1
2
3
4
.menu-item-1180
{
	float : right;
}

[leara500]

GENIAL !!!!!

Cela a fonctionné !!!!


Merci beaucoup !!!!!