EverWeb Widgets

responsive sticky sidebar

Responsive Sticky Sidebar Links

This type of layout is useful when a sidebar needs to remain in view as a long section is scrolled. A sidebar - or any other item - can be made to stick easily enough but it takes a little more to get it to stick within a parent element and scroll with the parent when it reaches the bottom.
The widget layout consists of an HTML5 section element with a maximum width set and centered in a full width wrapper. Inside the section is an article for the main content and an aside element for the sidebar navigation.
To avoid using Javascript, the section and the article elements use display:flex. The flex property is a sub-property of the Flexible Box Layout module.
This layout then allows the use of position:sticky to fix the position of the sidebar when the section is scrolled.
The main section has an h1 heading, an optional image with alt text and a text block. The image is centered and its percentage width can be adjusted.
The aside element has a fixed height set in pixels. This can be adjusted to suit the number of links or set at a lesser height to allow the content to scroll.
The sidebar links are displayed as block level elements so that they stack vertically and are very simply styled with an optional separator.
Media Queries
To change the layout when the browser width is reduced or the page is viewed on a touch device like an iPad or iPhone, media queries are used to change the layout from display:flex to display:block.

Quotes & Marks

Block Quote
The <blockquote> tag in HTML5 specifies text that is quoted from an external source.

“ A amateur web designer will give you what you want - a professional will give you what you actually need. ”
The browsers display it as a block element with a fairly large value for margin. Change this using style tags and insert this in the appropriate code box as described below …


<style>
blockquote{margin:5px 10px 10px;font-size:18px;color:#FF0000;font-weight:normal}
</style>

Mark or Highlight
Note the use of highlighted text. Rather than use a anonymous span like EverWeb does to change text styling in a paragraph, the mark is used. This element is new in HTML5 and defines marked or highlighted text so that the search engines know that words inside these elements are important. It appears as a nasty yellow background by default but can be styles using CSS.
Now that search engines deprecate or ignore the Keyword Meta Tag , using the mark element is an excellent way to draw attention to keywords for both the visitors and the search engine crawlers.

Hidden Mark
Highlighted text does look a little tacky so, to indicate the keywords to the search engines and hide them from view, the mark element can be styled to blend in with the rest of the text. This MARK is enclosed in <mark></mark> tags but how would anybody but the search engine spiders know?

Styles
These are the styles used for the mark on this page …

<style>
mark{padding:2px 5px;background:#888;color:#FFF}
</style>

The "hidden" mark is styled using this code …

<style>
mark{padding:0;background:transparent;color:#000}
</style>

These styles can be applied to a page using the Head Code box in the EverWeb Page inspector or to the whole site by using the one in the Site Publishing Settings page.

© EverWeb Widgets -