Search module in header drops to new row instead of sharing nav row #117

New Issue

2026-04-07T18:41:04Z

jmiller-moko commented

2026-04-07 18:41:04 +00:00

(Migrated from github.com)

Description

The search module in the search position within .container-header .container-nav drops to a new row below the main menu instead of sitting alongside it in the same flex row.

Expected Behavior

The search module should share the same row as the main navigation menu, aligned to the right side of the nav area.

Current Behavior

The search module wraps to a new row below the menu, taking full width. This was introduced by the CSS change that set .container-header .container-search to flex: 1 1 100%; width: 100% at desktop breakpoints (commit 1abdd9a).

Root Cause

The desktop media query override was changed from:
```css
.container-header .container-search {
flex: 0 0 auto;
min-width: 300px;
margin-top: 0;
}
```
to:
```css
.container-header .container-search {
flex: 1 1 100%;
width: 100%;
margin-top: 0;
}
```

The flex: 1 1 100% with width: 100% forces the search container to take a full row, pushing it below the nav.

Fix Needed

The search should be full width within its flex allocation but still share the row with the menu. The correct approach is likely:
```css
.container-header .container-search {
flex: 1 1 auto;
min-width: 200px;
margin-top: 0;
}
```

This lets the search grow to fill remaining space after the menu, without forcing a new row.

Affected Pages

All pages with a module in the search position — visible on https://waas.dev.mokoconsulting.tech/

Branch

dev/03.09.01

## Description The search module in the `search` position within `.container-header .container-nav` drops to a new row below the main menu instead of sitting alongside it in the same flex row. ## Expected Behavior The search module should share the same row as the main navigation menu, aligned to the right side of the nav area. ## Current Behavior The search module wraps to a new row below the menu, taking full width. This was introduced by the CSS change that set `.container-header .container-search` to `flex: 1 1 100%; width: 100%` at desktop breakpoints (commit `1abdd9a`). ## Root Cause The desktop media query override was changed from: \`\`\`css .container-header .container-search { flex: 0 0 auto; min-width: 300px; margin-top: 0; } \`\`\` to: \`\`\`css .container-header .container-search { flex: 1 1 100%; width: 100%; margin-top: 0; } \`\`\` The `flex: 1 1 100%` with `width: 100%` forces the search container to take a full row, pushing it below the nav. ## Fix Needed The search should be full width **within its flex allocation** but still share the row with the menu. The correct approach is likely: \`\`\`css .container-header .container-search { flex: 1 1 auto; min-width: 200px; margin-top: 0; } \`\`\` This lets the search grow to fill remaining space after the menu, without forcing a new row. ## Affected Pages All pages with a module in the `search` position — visible on https://waas.dev.mokoconsulting.tech/ ## Branch `dev/03.09.01`

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: MokoConsulting/MokoCassiopeia#117