there is already issue about this explaining how it should be. but again here is the explanation
OUR WORK NAVIGATION HOVER
The only section in the navigation with sub-categories is the 'our
work' tab. This is how the sub-sections should display on click.
CASE STUDY IMAGES
These images will need to be called in from a 'featured' case study
category. Only the most recent three case studies applied to the
category will be displayed.
MOBILE 'MORE' NAV
On mobile the 'more' nav slides up to cover the screen and is
displayed like this. For an example look at the mobile navigation on
this site: http://www.peterrowland.com.au/
SECTIONAL NAVIGATION
These are relative to the homepage. Active states will transform the
number into alhpanumeric, rather than numeral. These will need to
sync with each section based on scroll, aswell as on click.
NAVIGATION
Once the window size reaches the width of an iPad, the navigation is
to become a sticky bar at the bottom of the page.
SECTIONAL NAVIGATION
Due to the lack of room as the site becomes responsive, the active
stays will stay numerical, but become highlighted with an active
circle.
SUBSCRIBE LINK
The subscribe section moves to the center with the baseline
matching that of the Logo and the phone number.
OUR WORK TABLET NAVIGATION
The sub-nav items under our work should appear like this on tablet
sized devices. The section should slide up from under the nav items
smoothly.
NAVIGATION
The navigation converts into 4 clickable panels on mobile, with the
3 more important pages visible, and the rest of the pages to show
when the "More" button is clicked.
MORE BUTTON
The newsletter nav and remaining navigation items will appear in
here. Once touched, a panel will expand up showing the navigation
list.
LONG PAGES REQUIRE SECTIONAL NAVIGATION
Like the homepage, this page will require a sectional navigation list.
COLOURS
Each section will be a selected colour from the brand colours. These
colours should match the relevant sections from the Home Page.
LAYOUTS VARIATIONS
Page structures will rarely change - so each different sections may
need custom fields (page specific) to allow the different column
layouts.
ALTERNATIVE SECTION COLOURS
For long pages, there'll need to be a sectional colour difference to
help divide page sections up.
PROFILES
There'll be three profile categories - Board, Leadership and Seniors.
They will need to have the ability to enter/upload the following:
Profile Image
Name
Job title
Personal Linked In URL, and personal Twitter URL (These will be
optional fields, and will display if one of these members creates a
blog post).
on firefox browser.
here what is happening. when you are on page 3 pres for example page 4(button 4) the page is moving down, than up again and than placing the correct page again.
check what can be the problem.
IMAGES
There'll only be one featured image displayed.
BACKGROUND COLOUR FOR INTRO
A colour selector to control the background will be needed to allow
us to change the background to reflect the clients brand colours. By
default, the colour will be the Working Three blue.
SLIDER FUNCTIONALITY
The slider is to be a toggable feature through the back-end. If the
slider option has been toggled, the ability to upload slider images
should appear, and allow us to upload the slider images. (These will
be just the mobile screenshots). They should appear in the layered
hand which will be provided.
If the slider option is not toggled, the ability to be left blank, or
upload a static image should appear. The static image will not be
displayed in a mobile, or have the hand.
CONTENT / BACKGROUND
Once approx half the content has start scrolling up under the nav,
the backgrounds will transition to the next relevant section's colour,
and the content will auto-scroll to the next section.
SOCIAL menu
This will become static and sit above the content. It'll also need to
be re-added to the bottom of the content, just before the Author
info.
Wait for @srsjake to push the template for the dropdown
@alexandru-b Need to update homepage elements with @srsjake latest commit. @srsjake said there's no big changes just a few elements added for responsiveness.
INTRO SECTION
This is the same copy to be used in the excerpt (of course, with
the excerpts limiting the character count). This will need to be in
a seperate WYSIWYG editor, with the standard content appearing
below.
BLOCK QUOTES
These sections will just be block-quotes.
SOCIAL ICONS
These are to stack horizontally and become sticky once you scroll.
LOGO / NAVIGATION ITEMS
These will stay fixed on the homepage.
A transparent gradient matching the background will sit under the
header. As content scrolls, this will give the illusion that the copy is
fading underneath the header, to avoid overlap of links over content.
SECTION TITLE UNDERLINE
It's unlikely that this title will change, so stopping the underlining
border just before the G via positioning is required here.
OUR WORK NAVIGATION HOVER
The only section in the navigation with sub-categories is the 'our
work' tab. This is how the sub-sections should display on click.
CASE STUDY IMAGES
The case study sections only show the two latest case studies
rather than three (based on the featured category) as the site
becomes responsive.
according to design there shouldbe frames/borders between different case studies.
view case studies link below logo/picture is not shown according to designs.
LOGO IS TO BE UPLOADED AS A SEPERATE IMAGE TO THE
THUMBNAIL IMAGE.
This is so that the logo can be transitioned out on hover without
affecting the background image.
BACKGROUND BLUR
Background is to blur on the thumbnail when the tile is hovered over,
with a subtle black overlay appearing over the image.
FILTERS
Once filters reach the break point, they'll convert into a slide-able
section allowing you to swipe left and right through different filters
before toggling them.
POP-UPS
Pop-ups will be the same for all devices (Desktop to mobile).
If a square has "View Case Study", clicking the tile will take them to
the actual relevant case study. If no case study is available, a pop-up
will appear prompting the user to get in touch with us.
POP-UP LOGOS
The relevant logo to what was clicked will need to be called into the
modal.
NEWSLETTER
Clicking this will open a full screen modal like newsletter. For an
example of this, check out http://w3.workingthree.com and click the
Newsletter link at the top.