header logo with navigation buttons in html Archives - https://mitindia.in/tag/header-logo-with-navigation-buttons-in-html/ Mon, 23 Jan 2017 11:15:07 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 https://mitindia.in/wp-content/uploads/2023/03/cropped-android-chrome-512x512-1-32x32.png header logo with navigation buttons in html Archives - https://mitindia.in/tag/header-logo-with-navigation-buttons-in-html/ 32 32 Navigation bar with header logo using css https://mitindia.in/navigation-bar-header-logo-using-css/ Wed, 18 Jan 2017 08:06:11 +0000 http://www.mitindia.in/?p=722 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: […]

The post Navigation bar with header logo using css appeared first on .

]]> 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

Navigation and Header menu

Share

The post Navigation bar with header logo using css appeared first on .

]]>