Designs for Add-on Developer Hub header



8 years ago
7 years ago


(Reporter: fligtar, Assigned: chowse)





8 years ago
The Developer Hub at AMO has a special navigation heading on all of its pages with up to 4 top-level menus and a search box.

The new style makes this pretty ugly:

We need to figure out a way to keep those menus at the top and fit with the new style. The global search box can be removed or replaced with the documentation search.

Comment 1

8 years ago
Thanks Justin. Just so I totally understand, the goal is to redesign the developer toolbar rather than the main header here, right? Any design restrictions we should know about? Also, I know you need this soon but is there a specific deadline?

Assigning this to Lee...
Assignee: jslater → ltom

Comment 2

8 years ago
The goal is to convert the current functionality of the Dev Hub header to the new style. And our development of the new Developer Hub is wrapping up and planned to launch before the end of the year, so would really like something this week.
Blocks: 616769

Comment 3

8 years ago
I'm having the devhub search overload the header search (aka the header search becomes the devhub search), so removing it would be a non-ideal solution.

Comment 4

8 years ago
Hi All,
Here are a couple of mock ups for you to look at. We've been using this tab-styled sub navigation on some of the new pages (this is the same stylings we're using on our Customize page -scroll down to see them)

note: v1b I left the Search bar where it currently is, if we'll need more space for more tab options.

Let me know your thoughts, Thanks!

Comment 5

8 years ago
Hi Lee,

Sorry if this wasn't clear, but the menus drop down and have a number of links under them. If you visit you can see that on hover.

Also, not every page of the hub fits under one of those items, so I'm not sure if a tab-based model is right.

Blocks: 617155
bumping this to critical
Severity: normal → critical

Comment 7

8 years ago
Sorry to leave you guys hanging on this...
Please see the attached:

- I went with a lighter color than the universal header so as not to compete/repeat the style with another nav bar
- 01b is the Drop Down state of the menu
- Not sure if the page fonts will change. Looks like the system type of the current page is Helvetica or Arial. I mocked up Georgia in the nav bar since most of the new site pages are employing that font
- I'm unsure as to what color the page backgrounds will be. The other new pages I've redesigned have a white background with the gradated header and footers (w/ light stripes), but I see the AMO pages have a light blue background.

Comment 9

8 years ago
Thanks Lee. This works for me, but it's not my page. Flig?

Comment 10

8 years ago
Thanks Lee. We had some issues with the header on AMO being too large and chowse came up with a header design for AMO that is more space efficient and doesn't require us yelling over anything.

He had some ideas for how we can work navigation like this Dev Hub nav bar into it more seamlessly, so I've asked him take a crack at that.
Assignee: ltom → chowse

Comment 11

8 years ago
This change will actually be unnecessary now that we aren't showing the complete header while in the DevHub (see bug 616769).

We will move the search bar (which actually behaves differently on DevHub) into the navbar and giving it the same gradient/bevel as the header. This should be enough polish for v1.


7 years ago
Last Resolved: 7 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.