Top 3 stylish Wapkiz Header Code with colorful CSS code in 2021

If you are a Wapkiz or WapAxo user, this tune is for you. Today, for your convenience, I present to you the Top 3 stylish Wapkiz Header Code with colorful CSS code. I hope you like the stylish Wapkiz Header Code very much.

Also Read: Top 7 Wapkiz Category List 
 Code

Here are the Top 3 stylish Wapkiz Header Code. You can choose the header code of your choice from here. And I can say for sure, using these header codes you can make your site look attractive.

Note: from now on, various articles about Wapkiz will be published on the Clicklur site. And keep an eye on ArAmadul every day to get codes like Category, Header, Footer, File list, CSS, etc.

Top 3 stylish Wapkiz Header Code with colorful CSS code

To add headers to your site, copy the code of your choice from the Top 3 stylish Wapkiz Header Code below and use it on your site.

#1 Wapkiz Header Code Like BlogKiz with CSS

This Wapkiz Header Code is created using gradient color. Which will give your site a much nicer look. This header code has three options on the left side, which you can customize to your own liking. And on the right side there is a search engine added. And you can add a bigger logo.

Figure-1: BlogKiz Header

If you like the header style of Figure-1 above, copy the code given below and use it in your site. Also click on BlogKiz is to see the Live Demo.

Html / Tag Code

<div class="link">
<input type="submit" value="Home" onclick="home()" />
<input type="submit" value="ArAmadul" onclick="aramadul()" />
<input type="submit" value="Share" onclick="share()" />
<form action="/site-search.html">
<input type="text" value="Search..." name="to-search" />
</form></div>
<div style="height:35px"></div>
<div class="logobg"><div class="logo">
<img src="https://i2.extraimage.info/pix/2021/04/05/e5b577f99a4216c69430a8f18e19a3fc.png" alt="BlogKiz Logo by ArAmadul"/>
</div></div>

Note: Change the Code. Ex: value="Share"

Css Theme

body {
	margin: auto;
	background: #fff;}
img{
	max-width:100%;
	-o-object-fit:cover;
	object-fit:cover}
.link {
	overflow: hidden;
	background: black;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;}
.link input[type=submit] {
	height: 35px;
	width: 20%;
	background: #FF00FF;
	color: white;
	box-sizing: border-box;
	border: 0;
	border-right: 1px solid black;
	padding: 6px;
	float: left;}
.link input[type=text] {
	height: 35px;
	width: 40%;
	background: black;
	color: white;
	box-sizing: border-box;
	border: 0;
	padding: 6px;
	float: left;}
.logobg {
	background-image: linear-gradient(180deg, #FF00FF, #fff);
	padding: 2px 15px 35px 15px;}
.logo {
	width: 230px;
	height: 50px;
	background-size: 100%;
 	background-repeat: no-repeat;}

Meta Header

<script>
function home() { window.open("/"); }
function aramadul() { window.open("https://aramadul.aino.pk"); }
function share() { window.open("https://fb.com/itsamadul"); }
</script>

Note: Change the Code. Ex: https://fb.com/itsamadul

#2 Wapkiz Header Code Like LurMag with CSS

Like the first header code, this Wapkiz Header Code was created using gradient color. And you can add a big logo to the style of this header first. Then secondly, you will get three buttons, which you can customize to your own liking. You will also find search engine options under the third header style.

Figure-2: LurMag Header

If you like the header style of Figure-2 above, copy the code given below and use it on your site. Also click on LurMag is to see the Live Demo.

Html / Tag Code

<! -- Header Logo Start -- >
<header name="top" align="center"><div style="padding:2px:"></div>
<img src="https://i2.extraimage.info/pix/2021/04/05/1f092d67870a5785941dd9b8e613d569.png" alt=":site_name:" height="60px" width="240px" /><br/>
<! -- Header Logo End -- >
<! -- Header Table Start -- >
<table width="100%"><tbody><tr>
<th><a href="/"><div class="logoKing" align="center"><font color="#efefef"><i class="fa fa-home fa-spin"></i> Home</font></div></a></th>
<th><a href="ttp://aramadul.aino.pk" target="_blank"><div class="logoKing" align="center"><font color="#efefef"><i class="fa fa-book fa-spin"></i> Our Blog</font></div></a></th>
<div style="border:1px;padding:1px;solid green;">
<th><a href="http://aramadul.aino.pk" target="_blank"><div class="logoKing" align="center"><font color="#efefef"><i class="fa fa-user-circle fa-spin"></i> Profile</font></div></a></th>
</tr></tbody></table>
<! -- Header Table End -- >
</header>
<! -- Header Search Start -- >
<div class="search" align="center"><form action="/page-search/" method="get">
<input type="text" name="to-search" value="" placeholder="Search File" size="25">
<input type="submit" value="Search">
</form></div>
<! -- Header Search End -- >

Css Theme

body{margin:0px}
header{
	background-image: linear-gradient(180deg, #9c00b1, #f189ff);
	padding:6px}
.logoKing{
	background-image: linear-gradient(180deg, #f189ff, #9c00b1, #f189ff);
	padding:6px}
.search{
	background:#f6b1ff;
	padding:6px;
	font-weight:700}
#search input[type=text]{width:60%;}
input[type=submit]{
	padding:4px 10px;
	background-image: linear-gradient(180deg, #f189ff, #9c00b1, #f189ff);
	color:#fff;
	font-weight:normal}
input:hover[type=submit]{
	border:1px solid #223344;
	background:#223344;
	color:#efefef;}
input, select{
	padding:4px;
	margin:2px;
	border:1px solid #ccc;
	color:#223344;
	font-weight:normal;
	background:#f9f9f9}

#3 Wapkiz Header Code Like Mp3World with CSS

Like the two header codes given above, this Wapkiz Header Code is also created using gradient color. And this header style is very different from the two Header Styles given above.

This header style has the logo on the left and the Dropdown Menu button on the right. You can add categories, pages, etc. of your choice in the dropdown menu, very easily.

Figure-3: Mp3World Header

If you like the header style of Figure-3 above, copy the code given below and use it on your site. Also click on Mp3World is to see the Live Demo.

Html / Tag Code

<nav class="navbar navbar-default"><div class="header">
<! -- Brand and toggle get grouped for better mobile display. Designer by ArAmadul -- >
<div class="navbar-header"><header itemscope="itemscope">
<div itemprop="headline"><a class="navbar-brand primary-color-text" href="/" itemprop="url"><span itemprop="name">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLsi1X6phrQ3Nc752uP8Iz5PkOmdFWnPQSlCG9YJkxKmf7JaxsnhRk-XeDpsE81SvbjEAEaCNP_CHI-V41J9eOaVmkteK80MQzSTWvoO512l1EaWZlu90y1rK2ZtnXeUqEUuuFPPHFuMI/s320/Mp3World-Logo.png" alt="Mp3World logo, Created by ArAmadul" id="logo" />
</span></a></div></header>
<button type="button" class="navbar-toggle collapsed primary-color-text" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Menu</span><span style="color: white;" class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> 
</button> </div>
<div class="collapse navbar-collapse" style="color: ##00ff5a" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="http://aramadul.aino.pk" target="_blank"><font color="white"><i class="fa fa-book fa-spin"></i> Our Official Blog (ClickLur)</font></a></li>
<li><a href="http://aramadul.aino.pk"><font color="white" target="_blank"><i class="fa fa-user-o fa-spin"></i> Developer Information (LUR)</font></a></li> 
<li><a href="https://m.facebook.com/itsamadul" target="_blank"><font color="white"><i class="fa fa-users fa-spin"></i> Wapkiz Help Center on Facebook</font></a></li>
</ul> </div></form> </div></nav>

Css Theme

.header {
	background-image: linear-gradient(-210deg, red, yellow);}
#logo {
	margin-top: -14px;
	height:55px;
	weight:150px;}

Meta Header

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>

Conclusion

I hope you like the Wapkiz Header Code a lot. If you like it or need more code like this, I hope your comments. I am interested in writing tunes when I get your comments, so don't forget to encourage by commenting.

I will come to you soon with something new. Stay tuned until then. Wishing everyone good health and well-being, I am finishing the tune here today. Tata. 🤚🏻

Share this post