Responsive Webpage Header
A simple responsive webpage header template.
Install
npm install responsive-webpage-header
Usage
Use header.css file from dist folder or import header.scss into your .scss file. There's a few lines of JavaScript code that you need to include as well.
You can change SASS variables to adapt header to your needs.
Options:
- Background color of header and nav list
- Space around content
- Logo height
- Breakpoint (There is only one breakpoint and by default it is 968px)
- Menu btn size
HTML structure
<!-- Logo --> <!--<h1><a href="#">ResponsiveHeader</a></h1>--> <!-- Navigation --> Menu Home About Our work Contact
Fixed header
You can fix a header to the top of the page. All you have to do is to add class fixed
to header element. Header will shrink after you scroll 50px from the top.
...
Container
If you need to put logo and navigation inside some kind of a container – just do it.
... ...
Contributing
Yes please!
License
Licensed under MIT/GPL.
GPL2 license: http://www.gnu.org/licenses/gpl-2.0.html
MIT license: http://www.opensource.org/licenses/mit-license.php