How to create Responsive Header Menu with CSS
Now days responsive themes are very important for web development because many users use only mobile to check websites and I am also working on new theme of PHPGang on responsive rules and created a smart and responsive header with CSS media option.
| [wpdm_file id=46] |
In this article I will show you how to make CSS and HTML to display header on diffrent devices.
Article contain a demo and complete source code to download only for subscribed users.
This responsive header designed with only css no need of any jQuery and script to get device width etc.
style.css
Contains css for menu:
body
{
margin: 0;
width: 100%;
background: url('images/theronbg.png') 30px 0 repeat;
font-family: 'Open Sans', sans-serif;
}
a {
color: #4C9CF1;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #444;
}
img {
width: 100%;
}
header {
background: #fff;
width: 100%;
height: 76px;
position: fixed;
top: 0;
left: 0;
border-bottom: 4px solid #4C9CF1;
z-index: 100;
}
#logo{
margin-left: 20px;
float: left;
width: 200px;
height: 75px;
background: url(images/logo.png) no-repeat center;
display: block;
}
nav {
float: right;
padding: 20px;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: #4C8FEC url(images/menu-icon.png) center;
}
a:hover#menu-icon {
background-color: #444;
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: left;
padding: 10px
}
.current {
color: #2262AD;
}
section {
margin: 80px auto 40px;
max-width: 980px;
position: relative;
padding: 20px
}
/*MEDIA QUERY*/
@media only screen and (max-width : 640px) { /*If device width is higher than 640px use this css and if less than 640px use above */
header {
position: absolute;
}
#menu-icon {
display:inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 20px;
background: #fff;
border: 5px solid #444;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover ul {
display: block;
}
}This CSS has one /*MEDIA QUERY*/ which check device width and put css respectively.
If device size become less than 640px it will shrink menu items and show them in a drop-down you can check it by zoom in and zoom out your browser window with “ctrl”+”+” or “ctrl”+”-“.
index.html
Contains design of menu with header and nav menu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>PHPGang Programming Blog, Tutorials, jQuery, Ajax, PHP, MySQL and Demos</title>
</head>
<body>
<header>
<a href="#" id="logo"></a>
<nav>
<a href="#" id="menu-icon"></a>
<ul>
<li><a href="https://www.phpgang.com/" class="current">Home</a></li>
<li><a href="demo.phpgang.com/">Demos</a></li>
<li><a href="https://www.phpgang.com/category/jquery">jQuery</a></li>
<li><a href="https://www.phpgang.com/category/php">PHP</a></li>
<li><a href="https://www.phpgang.com/request-tutorials-here">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>We love your feedback and suggestions.
Tutorial Categories:
Here’s a question… is it possible, once open, to make the menu close on a mobile device given the inability to hover off of the “menu-icon”? I’ve been racking my brain trying to find a solution.
You have describe responsive designs in such a nice way or in a kind of series..
I like .