Project

General

Profile

Actions
Copy link

Feature #44444

closed

Update the mobile header and flyout menu colors to match the redesigned desktop header

Added by Go MAEDA 29 days ago. Updated 25 days ago.

Status:
Closed
Priority:
Normal
Assignee:
Go MAEDA
Category:
UI - Responsive
Target version:
7.0.2
Resolution:
Fixed

Description

The attached patches update the mobile layout (responsive.css) so that the header, the flyout menu, and the flyout menu headings use the colors of the desktop header redesigned in #43937. Until now, they kept the pre-redesign colors (#628db6 for the header and #3e5b76 for the flyout menu), so mobile pages looked different from desktop pages.

This resolves what was deferred in #43937#note-6: the mobile header color was intentionally left unchanged there because the flyout menu is designed to match the header, so both had to be updated together.

The first patch extracts the desktop header colors into CSS variables in :root of application.css, --color-header-background (#3A78A3) and --color-top-menu-background (#234761), so that they can be reused in the mobile layout. The second patch updates responsive.css to use these variables.

The screenshots below show the mobile header and the flyout menu at a 600px viewport before and after the patches.

Header before and after:

Flyout menu before and after:

Files

Download all files
header-before.png (9.51 KB) header-before.png Go MAEDA, 2026-09-12 11:04
header-after.png (9.59 KB) header-after.png Go MAEDA, 2026-09-12 11:04
flyout-before.png (25.7 KB) flyout-before.png Go MAEDA, 2026-09-12 11:06
flyout-after.png (26.1 KB) flyout-after.png Go MAEDA, 2026-09-12 11:06
0001-Extract-the-header-and-top-menu-background-colors-in.patch (1.4 KB) 0001-Extract-the-header-and-top-menu-background-colors-in.patch Go MAEDA, 2026-09-12 11:08
0002-Update-the-mobile-header-and-flyout-menu-colors-to-m.patch (1.3 KB) 0002-Update-the-mobile-header-and-flyout-menu-colors-to-m.patch Go MAEDA, 2026-09-12 11:08

Related issues

Related to Redmine - Feature #43937: Redesign the header with a navigation bar and lighter visual weightClosedGo MAEDAActions
Actions
Copy link
 #1

Updated by Go MAEDA 29 days ago

  • Subject changed from Update the mobile header and flyout menu colors to match the redesigned header to Update the mobile header and flyout menu colors to match the redesigned desktop header
Actions
Copy link
 #2

Updated by Go MAEDA 29 days ago

  • Related to Feature #43937: Redesign the header with a navigation bar and lighter visual weight added
Actions
Copy link
 #3

Updated by Go MAEDA 28 days ago

  • Target version changed from Candidate for next minor release to 7.0.2

Setting the target version to 7.0.2.

Actions
Copy link
 #4

Updated by Go MAEDA 26 days ago

  • Status changed from New to Resolved
  • Assignee set to Go MAEDA
  • Resolution set to Fixed

Committed the patch in r25099 and r25100.

Actions
Copy link
 #5

Updated by Go MAEDA 25 days ago

  • Status changed from Resolved to Closed

Merged the changes into 7.0-stable branch in r25111.

Actions
Copy link

Also available in: Atom PDF