Improve BuddyPress Trac's header for mobile devices

[anonymized_6594935]

Hi !

Following #4460, I'm suggesting to improve the BuddyPress Trac's header for mobile devices.

I've noticed, there was a JavaScript to toggle the "hamburger" menu, this patch is using the expected selector IDs for this navigation.min.js script. This means the layout of trac.wordpress.org/templates/buddypress/wporg-header.html has been edited.

I've also changed the navigation links as there were using http protocole instead of the https one.

You'll find screenshots and the patch attached to this ticket.

[anonymized_6594935]

Screenshot of the unfolded hamburger menu

[anonymized_6594935]

Screenshot of the folded hamburger menu

[anonymized_6594935]

Screenshot of the folded hamburger menu

[anonymized_6594935]

Ouch sorry I've attached one screenshot twice :(

[johnjamesjacoby]

In 8883:

BuddyPress/bbPress: include mobile responsive support for Trac.

Props imath. See #4472.

[johnjamesjacoby]

In 8884:

BuddyPress/bbPress: trac template changes for mobile responsive support.

Rename #header to #wporg-header, and bump CSS versions.

Props imath.

Fixes #4472.

[johnjamesjacoby]

Reopening. Trac header's are looking pretty broken now.

[anonymized_6594935]

@johnjamesjacoby Thanks for the commits I think there's some edits missing around line 12 in sites/trunk/trac.wordpress.org/templates/bbpress/wporg-header.html and sites/trunk/trac.wordpress.org/templates/buddypress/wporg-header.html

<button id="mobile-menu-button" aria-expanded="false"><span class="screen-reader-text">Toggle Menu</span></button>
	            <ul id="wporg-header-menu">

[johnjamesjacoby]

In 8885:

BuddyPress/bbPress: update Trac header markup (https, and menu ID)

See #4472.

[anonymized_6594935]

Button should be outside the ul

[anonymized_6594935]

The #wporg-header should be styled in style-buddypress.css

[anonymized_6594935]

It should look like this

[anonymized_6594935]

Hi @johnjamesjacoby

I've just had a look, here's what I suggest :

• Make sure the button is outside the <ul> but inside the .header-inner (> button-outside-ul.png)
• Make sure the #wporg-header is styled in style-buddypress.css ( > wporg-header-color.png )

Then it should look like result.png :)

[johnjamesjacoby]

In 8887:

BuddyPress/bbPress: move mobile menu out of UL.

See #4472.

[johnjamesjacoby]

In 8888:

BuddyPress/bbPress: add #wporg-header styling to site-specific CSS files.

See #4472.

[johnjamesjacoby]

In 8889:

BuddyPress/bbPress: bump CSS versions in Trac headers.

See #4472.

[anonymized_6594935]

Hi @johnjamesjacoby

I've just ran some other tests and I missed the single ticket view in my first patch. In this view the #subnav is missing and it makes the main nav hidden.

See >

The patch is fixing the hover effect on the header links and this ticket single view

See >

Thanks a lot for your help with it 👍

[netweb]

In 9122:

BuddyPress/bbPress: add #wporg-header styling to site-specific CSS files.

• Follow-up to [8888]

Props imath.
Fixes #4472.