[NEW] Black responsive web header template
yohans tesfaye
1 Tuesday 3,May/2016 6:06 am
Falling hurts alot but it make make stronger for next attempt.
In this topic we will see about header. Header is a main element that will be added on the top of the page,and the first seen by visitor. On the header site logo,link to sub pages and call to action must be include.
[img]http://ethio-pic.mywapblog.com/files/black-responsive-header.png[/img]
In previous i have shared a [url=http://ethio-pic.tk/forum2_theme_111347024.xhtml?tema=23]Black responsive footer template[/url], this header is much with this footer.

Key Features
In this header include elements are call to action,site logo and navigation bar. And it is responsive.

CSS
On head tag or in style sheet add this Css for header elements.
[php]<style type="text/css"> .screen { max-width: 1024px; margin: auto; }
.header { background: #363636 url(/img/601038/601038225_f6bf8a92ef.png) top repeat-x; color: white; font-weight: bold;}
.header .head {min-height: 50px; border-bottom: 1px #3f3f3f solid; padding: 20px 5px;}
.header .head .btn { float: right; padding: 8px 21px; color: #ededed; margin: 4px; display: inline-block; background: #363636; border: 1px #424242 solid; line-height: 28px;}
.header .heads a { padding: 0px; line-height: 28px; color: #ededed;}
.header ul { list-style: none;}
.header .heads ul li.tab { padding: 8px 18px; color: #ededed; margin: 0px; display: inline-block; border-left: 1px solid #4a4a4a; border-right: 1px solid #1a1a1a;}
.header .heads ul li.tab:hover,.header ul li.act:getid-site: { background: black; color: white; } </style> [/php]

HTML Code
On the header auto-content for website add this html code of header.
[php]<div class="header"><div class="screen"> <div class="head">:ic-206(header logo): <a href="#login"><span class="btn">Login</span></a> </div> <div class="heads"><ul><a href="#home"><li class="tab act0">Home</li></a><a href="#forum"><li class="tab act">Forum</li></a><a href="#community"><li class="tab act">Community</li></a><a href="#download"><li class="tab act">Download</li></a><a href="#service"><li class="tab act">Service</li></a><a href="#blog"><li class="tab act">Blog</li></a><a href="#cp"><li class="tab act">Cpanel</li></a><a href="#search"><li class="tab act">Search</li></a></ul></div> </div></div>[/php]
Note To hover/highlight active page change class 'act' to 'actsite_id'
example- let us say forum page id is '10' so we need to change class of forum from 'act' to 'act10'

Screen shot
some screen shots on pc and mobile

[img]http://ethio-pic.mywapblog.com/files/black-header-web.jpg[/img]

[img]http://ethio-pic.mywapblog.com/files/black-header-wap.jpg[/img]

Thank you
ethio-pic.tk
[img]http://ethio-pic.tk/601029/601029420_2b90f9cfd4.png[/img]
1 Vote · Reply · Quote · Report

raduuu
2 Tuesday 3,May/2016 4:20 pm
Dont work for me :(
[img]http://ethio-pic.tk/601029/601029420_2b90f9cfd4.png[/img]
1 Vote · Reply · Quote · Report

yohans tesfaye
3 Wednesday 4,May/2016 5:31 am
Falling hurts alot but it make make stronger for next attempt.
[quote=raduuu]Dont work for me :([/quote] what type of problem you face?
[img]http://ethio-pic.tk/601029/601029420_2b90f9cfd4.png[/img]
1 Vote · Reply · Quote · Report

raduuu
4 Wednesday 4,May/2016 3:34 pm
Dont work... Is not like yors. The style dont work to scroll the bar with the page
[img]http://ethio-pic.tk/601029/601029420_2b90f9cfd4.png[/img]
1 Vote · Reply · Quote · Report

raduuu
5 Wednesday 4,May/2016 3:59 pm
[img]http://s32.postimg.org/c2gy2tx7p/Screenshot_2016_05_04_20_40_32.png[/img]
[img]http://ethio-pic.tk/601029/601029420_2b90f9cfd4.png[/img]
1 Vote · Reply · Quote · Report

yohans tesfaye
6 Thursday 5,May/2016 7:36 am
Falling hurts alot but it make make stronger for next attempt.
[quote=raduuu]Dont work... Is not like yors. The style dont work to scroll the bar with the page [/quote] if you want it to scroll with page add this css
.header { top: 0px; position: fixed; z-index: 1040;}
[img]http://ethio-pic.tk/601029/601029420_2b90f9cfd4.png[/img]
2 Vote · Reply · Quote · Report

raduuu
7 Thursday 5,May/2016 4:33 pm
thank you
[img]http://ethio-pic.tk/601029/601029420_2b90f9cfd4.png[/img]
1 Vote · Reply · Quote · Report

uppystar
8 Wednesday 3,August/2016 2:37 pm
pls can u make it like urs that shoes the page color we are differently?
[img]http://ethio-pic.tk/601029/601029420_2b90f9cfd4.png[/img]
0 Vote · Reply · Quote · Report

yohans tesfaye
9 Thursday 4,August/2016 6:01 am
Falling hurts alot but it make make stronger for next attempt.
[quote=uppystar]pls can u make it like urs that shoes the page color we are differently?[/quote] i don't understand you
[img]http://ethio-pic.tk/601029/601029420_2b90f9cfd4.png[/img]
0 Vote · Reply · Quote · Report

uppystar
10 Monday 5,December/2016 5:36 pm
i mean d
[img]http://ethio-pic.tk/601029/601029420_2b90f9cfd4.png[/img]
0 Vote · Reply · Quote · Report


Add Comment
bolditalicunderlineimageurlcodephp
Name:

Content:

Preview ( 0)
: ..››..1.2
Name:

Content:

Name:

Content:

Name:

Content:

Name:

Content:

Name:

Content:

Name:

Content:

Download Bollywood full movie for free
Download Android App for Free
New Apps  Vidmate  IMO  more