Responsive Header

Links

Text links on a responsive website are very user unfriendly and should be replaced with tab links beheath the text. To qualify as "mobile friendly" links need to be at least 32px wide for a fingertip, 40px wide to enable it to be thumb drivem and an absolutee minimum height of 28px.
Responsive Links
The link bar shown about is primarily for adding links to support text content or to essential pages rather than as a navigation menu.
The links have a chevron option with a hover animation of the chevron and the background color. They have a flexbox layout so the links will wrap when there are too many to fit the content width.
The link container is centered with a maximum width setting and the link spacing can be adjusted.

Navigation

A conventional horizontal navigation at the top of the page has proved to be inefficient and less likely to persuade visitors to click through to other pages. A vertical navigation is the best option for both computers and mobile devices.
Mobile Navigation
Positioning the mobile navigation at the top left or right is really inconvenient for mobile device users. A better option is to place it nearer the side of the window at least 50% down from the top.
This is pretty obvious if you think about it but obviously the vast majority of web designers don't!
Navigation Menu
The menu opens by clicking/tapping an action tab which is at the top right above the breakpoint. Below the breakpoint the tab is located in the middle of the device window to the right.
The menu will close by clicking on the action tab, the overlay or any link.
The action tab can have a label when viewed on computers.
The navigation links are centered in an overlay. When the number of links excedes the viewport height any overflow will scroll.
The links have a background hover animation and the option to add a separator. The current page link can be indicated with a different background color.

Footer Bar

While just about every website has one there is no rule that syas it must have a footer. Many websites have a large footer jam packed with info that is hard to find and read and holds not interest for most visitors. Having a footer like that on a webpage that will be viewed on movile phones is unnecessary and a complete waste of space.
Footer Bar
The footer bar provides a replacement for a footer. It has a grid layout with three or four items and sticks to the bottom of the browser/device screen window.
The bar is in view on page load and disappears on scroll down. It reappears om scroll up or when the bottom of the page is reached.
The icons are SVGs with a hover backgroud animation. The border can be radiused and can be made round by checking a box.
Link
The first link is to an info page that has all the usual stuff that is usually in the footer. It has the option to change the icon so that it can be a link to the home page a or any other "must see" item.
Phone
The phone function is optional. On computers and tablets it show the phone number on hover or click and on phones it becomes a link to place the phone call.
Email
The spam protected email function has fields for the email name, domain, extension and subject. The @ and the dot are entered using Javascript to defeat spammers using scraping software.
Scroll Top
The last action tab is a smooth scroll to the top function which is an absolute must for responsive pages.
Footer
For those who still think that a footer is necessary, follow the link to see one that is compact and has all the required info …

Footer