Navigation bar with header logo or text demo using css / html
Below CSS and HTML program shows the use of Header Logo along with Navigation or Menu bar in the same line or alignment.
<html>
<head>
<style>
.menu{
background-color: red;
color: white;
padding: 18px;
font-size: 18px;
border: none;
}
.submenu {
position: relative;
display: inline-block;
}
.submenu-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 120px;
}
.submenu-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.submenu-content a:hover {background-color: gray}
.submenu:hover .submenu-content {
display: block;
}
.submenu:hover .menu {
background-color: orange;
}
.menu:hover{background-color: orange;}
nav{
display:inline;
float:right;
}
nav ul{
list-style:none;
}
nav ul li{
display:inline-block;
}
#logo-small{
display: inline;
font-weight:0;
font-size: 40pt;
font-family: 'Dosis' ,sans-serif;
}
</style>
</head>
<body>
<h2>Navigation bar with Header</h2>
<header>
<h1 id="logo-small"><img src="logo.png"> </h1>
<nav>
<button class="menu">Home</button>
<button class="menu">Service</button>
<div class="submenu">
<button class="menu">Product</button>
<div class="submenu-content">
<a href="#">Product 1</a>
<a href="#">Product 2</a>
<a href="#">Product 3</a>
</div>
</div>
<button class="menu">Contact</button>
</nav>
</header>
</body>
</html>
Output as following
