Top navigation bar HTML CSS
How to » Top navigation bar HTML CSS
Study in this chapter:
1. - What is top navigation bar menu?
2. - What are the types of navigation bar?
3. - top / horizontal navigation / nav bar html template, css code
1. The top navigation for your site is the horizontal red bar that lists sections or pages of your website. In many cases, the top navigation includes dropdown menus that display subpages of sections as well.
2. Let's look at a few of the most common types of website navigation you can choose from
- Horizontal Navigation Bar. ...
- Dropdown Navigation Menu. ...
- Hamburger Navigation Menu. ...
- Vertical Sidebar Navigation Menu. ...
- Footer Navigation Menu. ...
Internal Style - by using a <style> element in the <head> section
External Style - by using an external CSS file as style.css
Example:
CSS code - top / horizontal navigation / nav bar
responsive navigation menu css
margin: 4px;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #006;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #E9E9E9;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
Related subjects:
Sidebar navigation with scroll bar
How to Create a Sticky Navbar
Table HTML
Horizontal responsive navigation bar HTML
horizontal responsive navigation bar HTML example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 4px;
font-family: Arial, Helvetica, sans-serif;
}.topnav {
overflow: hidden;
background-color: #006;
}.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}.topnav a:hover {
background-color: #E9E9E9;
color: black;
}.topnav a.active {
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body><div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</div><div style="padding-left:16px">
<h2>Top Navigation bar Example</h2>
<p>Your website content ..</p>
</div></body>
</html>
Tags: top navigation bar html, code, css template, fixed, insert image in top navigation bar with logo, dropdown menu, html responsive top navigation bar, how to move navigation bar to the top html
Insert image in top navigation bar html
How to add logo on navigation bar in HTML Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 4px;
font-family: Arial, Helvetica, sans-serif;
}
.logo-image{
width: 46px;
height: 46px;
border-radius: 50%;
overflow: hidden;
margin-top: -6px;
}
.topnav {
overflow: hidden;
background-color: #006;
}.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}.topnav a:hover {
background-color: #E9E9E9;
color: black;
padding-top: 26px;
padding-bottom: 26px;
}.topnav a.active {
background-color: #04AA6D;
color: white;
padding-top: 26px;
padding-bottom: 26px;
}
</style>
</head>
<body><div class="topnav">
<a class="navbar-brand" href="/">
<div class="logo-image">
<img src="image" class="img-fluid">
</div>
</a><a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</div><div style="padding-left:16px">
<h2>Insert image in top navigation bar - Example</h2>
<p>Your website content ..</p>
</div></body>
</html>
Summary of description
top navigation bar examples, design, website, html template, css template
Top navigation bar HTML CSS - how to
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.