The header area that contains an icon to open menus, brand name, and some important buttons is known as a toolbar.
Preview:-
<!DOCTYPE html>
<html>
<head>
<title>Tabs - Jquery Mobile | Jaischool</title>
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#page{background:white;}
#header{background:purple;}
#header .ui-btn{
background:inherit;
color:white;
text-shadow:none;
border:none;
padding:8px;
}
#header .ui-btn:focus{
-webkit-box-shadow:inherit;
-moz-box-shadow:inherit;
box-shadow:inherit;
}
#header .nav-icon{font-size:20px;}
#header #brand-name{
font-size:20px;
margin-left:5px;
}
#toolbar i{
font-size:18px;
color:white;
-webkit-text-shadow:none;
-moz-text-shadow:none;
text-shadow:none;
}
</style>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header" id="header">
<div class="ui-grid-solo">
<div class="ui-block-a">
<a href="#" data-role="button"><i class="fa fa-bars nav-icon"></i> <span id="brand-name">Jaischool</span></a>
</div>
</div>
<!--start toolbar grid-->
<div class="ui-btn-right" id="toolbar">
<div class="ui-grid-c">
<div class="ui-block-a"><a href="#" data-role="button"><i class="fa fa-bell"></i></a></div>
<div class="ui-block-b"><a href="#" data-role="button"><i class="fa fa-search"></i></a></div>
<div class="ui-block-c"><a href="#" data-role="button"><i class="fa fa-id-badge"></i></a></div>
<div class="ui-block-d"><a href="#" data-role="button"><i class="fa fa-shopping-bag"></i></a></div>
</div>
</div>
<!--end toolbar grid-->
</div>
</div>
</body>
</html>
Publish A Comment