Instructions
Global Page Structure
Below are some mandatory components that you have to include before starting any page development
1. Global Search Component
2. Main Navigation
3. Footer
4. Copyrights
5. Loader
Between the Main Navigation and the Footer Component you can start placing the sections and start the page development.
Global Search Structure
1. Global Search Component
Global Search Component is the search bar only for mobile devices it will only be used by the DOM in the devices with the width < 768. This component will slide down when user will click on the search button visible near the hamburger button in the mobile devices
Navigation Structure
1. Main Navigation > Top Contact Strip
Top Contact Strip is a wrapper to the quick links like Email and Contact along with the contact links like Facebook, Twitter, Instagram and Youtube . As we have 2 navigation menus, one for desktop and one for mobile devices we also have 2 contact strip as well so the Top Contact Strip is for desktop. Which means it will only be visible in the screens > 768. If you want to change any quick link then you will have to update the link in the Top Contact Strip and also, in the Mobile Contact Strip( will be explaining this further in the document)
2. Main Navigation > Container 1200 > Navigation inner > Navigation Container Desktop
This div with class Navigation Container and Desktop class is where you can find navigation links. This links will only be visible when the screen is larger than 768 which means if you want to update the navigation links only for Desktop then you can update and make the changes in the links under The div with Navigation Container Desktop. But if you have to add a link in both mobile and desktop devices then you have to update the link inside the Navigation Container Desktop and also in the Navigation Container Mobile.
3. Main Navigation > Container 1200 > Navigation inner > Navigation Container Mobile
This div with class Navigation Container and Mobile class is where you can find navigation links. This links will only be visible when the screen is smaller than 768 which means if you want to update the navigation links only for Mobile then you can update and make the changes in the links under The div with Navigation Container Mobile. But if you have to add a link in both mobile and desktop devices then you have to update the link inside the Navigation Container Desktop and also in the Navigation Container Mobile.
4. Main Navigation > Container 1200 > Navigation inner > Brand Logo Container
The Div with class named Brand logo Container contains the template logo.
5. Main Navigation > Container 1200 > Navigation inner > Nav Search Bar
Nav Search Bar contains the search input. Using this search input user can search for any particular blog. Again this element is also having a clone for mobile devices. But if you want to make any change in the desktop search bar then you can click on the nav search bar and start editing
6. Main Navigation > Container 1200 > Navigation inner > Nav Mobile Button Container
Nav Mobile Button Container is only visible in the screens with the width < 768px. This div contains the hamburger menu button to open the mobile menu. And search button to open the search bar.