In Metro Publisher, the header HTML includes some specific items. Here is some basic info about what is contained and how those can be styled via CSS for different screen sizes.
Desktop
Image 01: Wireframe of header elements at desktop.
At desktop sizes (i.e. any screen over 768px wide) the header lays out similar to the image above. These are the elements contained within the header:
- Your logo – This is inserted via the theme editor and can be repositioned via CSS. This automatically is wrapped in a link that that returns the user to the homepage.
- Main navigation that displays all sections – The main navigation is automatically generated and ordered within the section editor. It lays out horizontally as an unsorted list by default. The properties of the navigation that can be adjusted are things like fonts, padding, margin, colors, width, and positioning.
- Dropdown navigation for subsections – The sub-navigation is a nested list for each subsection contained with a parent section. It lays out vertically as an unsorted list by default that hides/shows on hover. The properties of the navigation that can be adjusted are things like font, padding, margin, colors, width, and positioning.
- Search tool – There are two different search tool options; Metro Publisher's native tool or a third party version provided by Google Custom Search Engine. The positioning of the container element can be manipulated with CSS. Additionally, the input field and input button can be styled with CSS.
- Header text links – Text links can be added to the header from the Header & Footer edit page of your worksite. The font, padding, margin, colors, and positioning can be styled with CSS.
- Social media links with graphical icons – The social media links can be "turned on" also from the Header & Footer edit page of your worksite. These are graphical icons that link to the URLs for your social media. The positioning of the container element can be manipulated with CSS. Also, the image sprite used for the icons can be changed.
Tablet
Image 02: Wireframe of header elements on a tablet.
Image 03: Wireframe of header elements on a tablet with the sub-navigation open.
At the middle breakpoint (i.e. any screen between 600px and 767px wide – generally tablets) the header lays out similar to the image above. Here's typically what is done:
- Your logo – The logo is generally centered and reduced in size (if necessary).
- Main navigation that displays all sections – The main navigation is inserted into a mobile "hamburger" nav.
- Dropdown navigation for subsections – Subsections show up as nested items within main navigation.
- Search tool – The search tool is repositioned at the bottom of the list of sections/subsections within the collapsing mobile navigation.
- Header text links – Header links are repositioned above the logo.
- Social media links with graphical icons – Social media links reposition below search tool within mobile navigation.
Mobile
Image 04: Wireframe of header elements on a mobile with and without the sub-navigation open.
At the smallest breakpoint (i.e. any screen 599px or smaller – generally mobile phones) the header lays out similar to the image above. Here's typically what is done:
- Your logo – The logo is generally centered and reduced in size (if necessary).
- Main navigation that displays all sections – The main navigation is inserted into a mobile "hamburger" nav.
- Dropdown navigation for subsections – Subsections show up as nested items within main navigation.
- Search tool – The search tool is repositioned at the bottom of the list of sections/subsections within the collapsing mobile navigation.
- Header text links – Header links are repositioned above the logo.
- Social media links with graphical icons – Social media links reposition below search tool within mobile navigation.
Comments