The header looks great, but I think the UX part could be improved by just changing some minor things. I would make a pull request but UX is subjective and is better when there's user feedback (because that's the point of UX) and discussion, so thus an issue has spawned!
- Search
- The search box's placeholder text color is around `#eee`` while the background is `#fff`` (white), and not only that the typeface is very thin. The font weight should be bold and with a darker text color.
- *possibly* minor issue: Since the search box is smaller compared to most of the other stuff on the other page and all the things on the header are white, it should contain a magnifying glass icon so it's more noticeable. Plus not all users know pressing enter is an option.
- Drop down menus
- Animations on the drop down menu aren't being used correctly. Instead of fading in on click and out, it should just be a slide from the top to bottom position, and bottom to top position when clicked out. Example: http://callmenick.com/post/slide-down-menu-with-jquery-and-css
- When clicking on button that triggers a drop down menu, the other drop down menus should close to avoid overlap and cluttering.
- The names "Brickipedia" and "Brickimedia" are too similar, and their logos are similar which can lead to a miss-click to the wrong site. Their logos are also very similar but...
- The problem is: The logos and name have lasted for so long that they're ingrained into the user, so changing it would take time to rebuild recognition between the logo and the user.
- Possible solution: Change position between "Brickipedia" and "Brickimedia" on the drop down list so they aren't as close to each other and will lead to less confusion.
- The text on the sub-items of the list are too squished together, which decreases readability and increases miss-clicks, so increase the margin between them
- Clicking on the drop down menu box is possible, but the sub-menu item boxes aren't clickable and only clickable via the text. They should be `displayed`` as `blocks` (`display:block;``)
- Close drop down menu after clicking outside of it (suggestion by George Barnick)
Original author: Codynguyen1116
Orginal date: January 11th, 2016
Original title: Improve header UX
Original ticket: https://github.com/Brickimedia/brickimedia/issues/434