Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/05/30 16:24
From version 8.16
edited by Agnease
on 2026/05/19 03:34
Change comment: There is no comment for this version
To version 8.17
edited by Agnease
on 2026/05/19 03:36
Change comment: There is no comment for this version

Summary

Details

XWiki.StyleSheetExtension[1]
code
... ... @@ -157,81 +157,88 @@
157 157   }
158 158  }
159 159  
160 -/* ========== Mobile Navigation Optimization ========== */
160 +/* ========== Compact Public Menu on Mobile ========== */
161 161  
162 162  @media (max-width: 767px) {
163 + /* Prevent any menu element from creating horizontal scroll */
164 + html,
165 + body {
166 + overflow-x: hidden;
167 + }
168 +
169 + .navbar,
170 + .navbar-collapse,
171 + .navbar-nav,
172 + .navbar-nav > li,
173 + .navbar-nav .dropdown-menu {
174 + max-width: 100%;
175 + }
176 +
177 + /* Make the main menu vertical inside the burger menu */
163 163   .navbar-nav {
179 + float: none !important;
180 + width: 100%;
164 164   margin: 0;
165 165   }
166 166  
167 - .navbar-collapse {
168 - border-top: 1px solid @line;
169 - box-shadow: none;
184 + .navbar-nav > li {
185 + float: none !important;
186 + display: block;
187 + width: 100%;
170 170   }
171 171  
172 172   .navbar-nav > li > a {
173 - padding: 14px 18px;
191 + display: block;
192 + width: 100%;
193 + padding: 11px 16px;
194 + font-size: 14px;
174 174   font-weight: 600;
175 - color: @text;
196 + line-height: 1.3;
197 + white-space: normal;
176 176   }
177 177  
178 - .navbar-nav > li > a:hover,
179 - .navbar-nav > li > a:focus {
180 - background: @brand-bg;
181 - color: @brand-strong;
200 + .navbar-nav > li > a .caret {
201 + float: right;
202 + margin-top: 7px;
182 182   }
183 183  
184 - .navbar-nav .open > a,
185 - .navbar-nav .open > a:hover,
186 - .navbar-nav .open > a:focus {
187 - background: @brand-bg;
188 - color: @brand-strong;
189 - }
190 -
205 + /* Dropdowns become compact nested sections */
191 191   .navbar-nav .dropdown-menu {
192 - position: static;
193 - float: none;
194 - width: 100%;
207 + position: static !important;
208 + float: none !important;
209 + width: 100% !important;
210 + min-width: 0 !important;
211 + max-width: 100% !important;
195 195   margin: 0;
196 - padding: 6px 0 12px;
213 + padding: 4px 0 8px;
197 197   border: 0;
198 198   border-radius: 0;
199 199   box-shadow: none;
200 - background: #fff;
217 + background: @brand-bg;
201 201   }
202 202  
203 - .navbar-nav .dropdown-menu .divider {
204 - margin: 6px 18px;
205 - background-color: @line;
220 + .navbar-nav .dropdown-menu > li {
221 + width: 100%;
206 206   }
207 207  
208 208   .navbar-nav .dropdown-menu > li > a {
209 - display: flex;
210 - align-items: flex-start;
211 - gap: 12px;
212 - padding: 10px 18px 10px 28px;
225 + display: block;
226 + width: 100%;
227 + padding: 8px 16px 8px 28px;
213 213   white-space: normal;
229 + overflow-wrap: anywhere;
214 214   color: @text;
215 215   }
216 216  
217 217   .navbar-nav .dropdown-menu > li > a:hover,
218 218   .navbar-nav .dropdown-menu > li > a:focus {
219 - background: @brand-bg;
235 + background: @brand-soft;
220 220   color: @brand-strong;
221 221   }
222 222  
239 + /* Compact the rich dropdown layout on mobile */
223 223   .navbar-nav .dropdown-menu .menu-icon {
224 - flex: 0 0 28px;
225 - width: 28px;
226 - height: 28px;
227 - margin-top: 2px;
228 - border-radius: 9px;
229 - background: @brand-soft;
230 - color: @brand-strong;
231 - display: flex;
232 - align-items: center;
233 - justify-content: center;
234 - font-size: 14px;
241 + display: none;
235 235   }
236 236  
237 237   .navbar-nav .dropdown-menu .menu-text {
... ... @@ -241,26 +241,26 @@
241 241  
242 242   .navbar-nav .dropdown-menu .menu-text strong {
243 243   display: block;
244 - font-size: 14px;
251 + font-size: 13px;
245 245   line-height: 1.25;
253 + font-weight: 600;
246 246   color: @text;
247 247   }
248 248  
257 + /* Hide descriptions on mobile to avoid a very tall / wide menu */
249 249   .navbar-nav .dropdown-menu .menu-text small {
250 - display: block;
251 - margin-top: 2px;
252 - font-size: 12px;
253 - line-height: 1.35;
254 - color: @muted;
259 + display: none;
255 255   }
256 256  
257 - .navbar-nav .dropdown-menu > li > a:hover .menu-text strong,
258 - .navbar-nav .dropdown-menu > li > a:focus .menu-text strong {
259 - color: @brand-strong;
262 + .navbar-nav .dropdown-menu .divider {
263 + margin: 4px 16px;
264 + background-color: @line;
260 260   }
261 261  
262 - .navbar-nav .caret {
263 - float: right;
264 - margin-top: 8px;
267 + .navbar-nav .open > a,
268 + .navbar-nav .open > a:hover,
269 + .navbar-nav .open > a:focus {
270 + background: @brand-bg;
271 + color: @brand-strong;
265 265   }
266 266  }