Implement the new nav bar/header
Description
Environment
None
Attachments
5
blocks
Gliffy Diagrams
Activity
Show:
Scott Robinson October 19, 2015 at 10:15 AM
Scott Robinson
October 19, 2015 at 10:15 AM
@Krishna looks fine to me. Some minor changes coming in a new task.
Scott Robinson October 5, 2015 at 10:19 AM
Scott Robinson
October 5, 2015 at 10:19 AM
This looks great to me from a design point of view.
Just a couple of minor changes:
Change on the mobile/tablet sizes is that the cursor when hovering over the menu button should be a pointing hand instead of the text cursor (like the full size nav has on the buttons).
The colour of the text of the menu button and items in the menu (when on the white version) should be a little darker #4C4C4C.
Krishna October 4, 2015 at 12:50 PM(edited)
Krishna
October 4, 2015 at 12:50 PM
(edited)
Pushing it back to progress, just because the changes in the footer have to be merged before this can be reviewed. But looks close to the design. There are few 404 errors printed in the console, would be good to get it resolved.
Done
Details
Details
Assignee
KrishnaReporter
Scott RobinsonLabels
Priority
MajorCreated September 30, 2015 at 9:11 AM
Updated October 20, 2016 at 3:38 PM
Resolved October 20, 2015 at 4:59 AM
Implement the navigation for end user site from the attached designs.
Main points in Desktop (small, medium, large):
Should be transparent&white when page is not scrolled and over an image or colour. Otherwise it should be white&blue.
Height of bar should be 70px. It is currently too big.
The header should take up the full with of the window with the logo on left side and the menu on the right.
The MaidSafe logo should be aligned with the left edge of the screen +16px.
The menu should be aligned with the right edge of the screen -16px.
Fix the spacing between menu items. It should be 40px to the edge of each item (including the button).
The height of the logo from the bottom should be 18px.
The height of the menu form the bottom of the bar ( taken from the bottom of the download button) should be 16px.
There should be a small drop shadow on the nav bar when the page is scrolled (and it's white) This should have a Yheight of 2px, blur of 1px and 20% opacity.
Points for nav on mobile, tablet:
should use the same scheme as the desktop version where it is transparent&white while not scrolled&image and white&blue when scrolled.
Has a different layout to the desktop version and to the previous mobile version.
The logo should be always left aligned =16px.
The menu button should be left aligned -16px (taken from right edge of arrow).
The menus, when expanded shows all items in the menu in the same order as desktop within a dropdown on the right.
The items shown should include the download option.
There is a hover state for each item see attached design.
There should be a drop shadow on the menu when white of y:2px blur:1px opacity:20%
There should also be a drop shadow on the dropdown with the same properties.
The menu arrow should not rotate. The change between down and up should be instant.