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.20
edited by Agnease
on 2026/05/19 03:38
Change comment: There is no comment for this version

Summary

Details

XWiki.StyleSheetExtension[1]
code
... ... @@ -157,81 +157,98 @@
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 + .agnease-services-dropdown,
170 + .agnease-products-dropdown,
171 + .agnease-resources-dropdown {
172 + width: 100% !important;
173 + min-width: 0 !important;
174 + max-width: 100% !important;
175 + left: auto !important;
176 + right: auto !important;
177 + }
178 +
179 + .navbar,
180 + .navbar-collapse,
181 + .navbar-nav,
182 + .navbar-nav > li,
183 + .navbar-nav .dropdown-menu {
184 + max-width: 100%;
185 + }
186 +
187 + /* Make the main menu vertical inside the burger menu */
163 163   .navbar-nav {
189 + float: none !important;
190 + width: 100%;
164 164   margin: 0;
165 165   }
166 166  
167 - .navbar-collapse {
168 - border-top: 1px solid @line;
169 - box-shadow: none;
194 + .navbar-nav > li {
195 + float: none !important;
196 + display: block;
197 + width: 100%;
170 170   }
171 171  
172 172   .navbar-nav > li > a {
173 - padding: 14px 18px;
201 + display: block;
202 + width: 100%;
203 + padding: 11px 16px;
204 + font-size: 14px;
174 174   font-weight: 600;
175 - color: @text;
206 + line-height: 1.3;
207 + 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;
210 + .navbar-nav > li > a .caret {
211 + float: right;
212 + 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 -
215 + /* Dropdowns become compact nested sections */
191 191   .navbar-nav .dropdown-menu {
192 - position: static;
193 - float: none;
194 - width: 100%;
217 + position: static !important;
218 + float: none !important;
219 + width: 100% !important;
220 + min-width: 0 !important;
221 + max-width: 100% !important;
195 195   margin: 0;
196 - padding: 6px 0 12px;
223 + padding: 4px 0 8px;
197 197   border: 0;
198 198   border-radius: 0;
199 199   box-shadow: none;
200 - background: #fff;
227 + background: @brand-bg;
201 201   }
202 202  
203 - .navbar-nav .dropdown-menu .divider {
204 - margin: 6px 18px;
205 - background-color: @line;
230 + .navbar-nav .dropdown-menu > li {
231 + 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;
235 + display: block;
236 + width: 100%;
237 + padding: 8px 16px 8px 28px;
213 213   white-space: normal;
239 + 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;
245 + background: @brand-soft;
220 220   color: @brand-strong;
221 221   }
222 222  
249 + /* 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;
251 + 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;
261 + font-size: 13px;
245 245   line-height: 1.25;
263 + font-weight: 600;
246 246   color: @text;
247 247   }
248 248  
267 + /* 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;
269 + 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;
272 + .navbar-nav .dropdown-menu .divider {
273 + margin: 4px 16px;
274 + background-color: @line;
260 260   }
261 261  
262 - .navbar-nav .caret {
263 - float: right;
264 - margin-top: 8px;
277 + .navbar-nav .open > a,
278 + .navbar-nav .open > a:hover,
279 + .navbar-nav .open > a:focus {
280 + background: @brand-bg;
281 + color: @brand-strong;
265 265   }
266 266  }