Split horizontal navigation bar

Next Page >>
div class container

How to » Split navigation bar

Study in this chapter:
1. - How do I space out the navigation bar in HTML?
2. - Create A Split 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. ...

We can add CSS style to horizontal navigation / nav bar as:
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 split horizontal navigation / nav bar

responsive navigation menu css

Example:

body {
margin: 4px;
font-family: Arial, Helvetica, sans-serif;
}

.topnav {
overflow: hidden;
background-color: #036;
}

.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.topnav a:hover {
background-color: #ddd;
color: black;
}

/* Create a right-aligned (split) link inside the navigation bar */
.topnav a.split-right {
float: right;
background-color: #03945E;
color: white;
}

Horizontal responsive top split navigation bar HTML

horizontal responsive top split 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: #036;

  }
.topnav a {

  float: left;

  color: #f2f2f2;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

  font-size: 17px;

  }
.topnav a:hover {

  background-color: #ddd;

  color: black;

  }
/* Create a right-aligned (split) link inside the navigation bar */

  .topnav a.split-right {

  float: right;

  background-color: #03945E;

  color: white;

  }

  </style>

  </head>

  <body>
<div class="topnav">

  <a class="active" href="#home">Home</a>

  <a href="#products">Products</a>

  <a href="#services">Services</a>

  <a href="#contact">Contact</a>

  <a href="#about" class="split-right">Help</a>

  </div>
<div style="padding-left:16px">

  <h2>Split horizontal Navigation Example</h2>

  <p>The "Help" link in the horizontal navigation bar is separated from the left of the navigation links, result is a "split navigation" layout.</p>

  </div>

  

  </body>

  </html>

Tags: top navigation bar HTML, code, CSS template, fixed, insert image in the top navigation bar with logo, dropdown menu, HTML responsive top navigation bar, how to move navigation bar to the top html

Split navigation bar - Bootstrap

Split navigation bar - Bootstrap Example

<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Example</title>

<meta charset="utf-8">

<meta name="viewport"

content="width=device-width, initial-scale=1">

<link rel="stylesheet" href=

"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<script src=

"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

</script>

<script src=

"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">

</script>

</head>

<body>

<nav class="navbar navbar-default">

<div class="container-fluid">

<div class="navbar-header">

<a class="navbar-brand" href="#">

WebSiteName</a>

</div>

<ul class="nav navbar-nav">

<li class="active"><a href="#">Home</a></li>

<li><a href="#">Page 1</a></li>

<li><a href="#">Page 2</a></li>

<li><a href="#">Page 3</a></li>

</ul>

</div>

</nav>

</body>

</html>

Summary of description

<< Previous Page
HTML Button Style

Next Page >>
HTML Button Action

top navigation bar html , template, css, code, css template, fixed, insert image in top navigation bar html, with logo,
Split horizontal navigation bar - how to

Online Editor

ONLINE EDITOR

news templates

COLOR PICKER

news templates

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

HTML Templates

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

CSS HTML Layout

Find here examples of creative and unique website layouts.

Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.