How To Create a Split Navigation Bar with CSS
Navigation
How To, for Web Applications
By: Chrysanthus Date Published: 9 Mar 2025
A split navigation bar is a menu horizontal bar, where most of the menu items (hyperlinks) are on the left of the bar and a few are on the right of the bar. For the example of this tutorial, there are four menu items, with three on the left and one on the right. The four menu items (hyperlinks) for this example are Home, News, Contact and Help. Home, News, Contact in that order, are on the left end of the bar and the Help hyperlink is on the right end of the bar. Remember that in code form, the hyperlink is the anchor (a) element.
At the end of this tutorial, is the complete code for the webpage. The reader should copy the complete code into the text editor. Save the file with a filename having the extension, .html . Open the file in a browser to see how a split navigation bar looks like. The reader is advised to do that now before continuing to read.
The Webpage Skeleton Code
The webpage skeleton code for the example of this tutorial is:
<!DOCTYPE html>
<html>
<head>
<title>Split Navigation Bar</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
The HTML style element will have some content. Though JavaScript is not obligatory for this example, the script tag will have some JavaScript content. Of course, the HTML body tag will have the anchor elements. The anchor element is the code for a hyperlink. It is assumed that the reader knows the use of the rest of the other tags in the skeleton code.
Strategy
A div element is the code element for the horizontal bar. This div element will be in the HTML body element. Anchor elements by default are inline elements. The first three anchor elements will be floated left in the div element in the order that they are coded. The last anchor element (Help) will be floated right in the same div element.
The HTML Body Element
The content of the body element is as follows:
<div class="topnav">
<a class="active" href="#home" id="0" onclick="fn(id)">Home</a>
<a href="#news" id="1" onclick="fn(id)">News</a>
<a href="#contact" id="2" onclick="fn(id)">Contact</a>
<a href="#help" class="split" id="3" onclick="fn(id)">Help</a>
</div>
<div style="padding-left:16px">
<h2>Split Navigation Example</h2>
<p>The "Help" link in the navigation bar is separated from the rest of the navigation links, resulting in a "split navigation" layout.</p>
</div>
The are two div elements here. The first one is the one that concerns the split navigation bar. The class-name is "topnav" . It has 4 hyperlink (anchor) elements. The contents of the anchor (a) elements are: Home, News, Contact, and Help. Each 'a' element is given a style in the HTML style element in the HTML head element. The JavaScript onclick event is to give the hyperlink that is clicked, a #04AA6D (green) background color and white foreground color, to show that the anchor element is active.
Styles for the Split Navigation Bar and its Constituents
At the core of the navigation bar is the div element with inline 'a' elements, naturally in a horizontal line. Without the styles for the div element and its anchor elements, the navigation bar will not have a modern professional look.
CSS Rule for the Body Element
The CSS rule for the body element is:
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
The margin all round the body element is 0px. This is good for this particular webpage design. Under this condition, the top navigation bar will align with the top edge and left edge of the body element (no space).
CSS Rule for the Split Navigation Bar div Element
The CSS rule for the bar div element is:
div.topnav {
overflow: hidden;
background-color: #333;
}
"overflow: hidden;" means that there should not be many anchor elements in the div bar. If there are many anchor elements, the extra ones on the right will be clipped off (will not be displayed). The background color of the div element is #333, which is black, but not the blackest black. There is not much styling for the bar div. A lot of styling goes to the anchor elements.
CSS Rule for Each Anchor Element
The anchor element is the hyperlink element. The CSS rule for each of the anchor element is:
div.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
The selector is "div.topnav a" . So any 'a' element that is in any div element that has the class-name, "topnav", has the declaration properties (styles) in this style rule. The style rule is the whole code segment, beginning from the selector to the closing curly bracket.
The anchor element is rectangular and inline by default. "inline" means that the next element should appear on its right. All the anchor elements are floated to the left. Each has a text color of #f2f2f2 (whitish). Within its rectangle, the text is align at the center. Between the text and border of each 'a' element, is padding space. The top and bottom padding is 14px; and the right and left padding is 16px. The text-decoration is none, meaning that, when the mouse pointer is above the text, even though it is a hyperlink, there should be no underlining of the text. The font-size of the hyperlink text is 17px: big enough.
This "div.topnav a" CSS rule is also applicable to any element floated to the right end of the navigation bar.
Anchor Element Rectangle On-hover
The on-hover CSS rule is:
div.topnav a:hover {
background-color: #ddd;
color: black;
}
When the mouse pointer enters a hyperlink rectangle, its background color becomes #ddd (grayish), and its text color becomes black (for contrast).
This "div.topnav a:hover" CSS rule is also applicable to any element floated to the right end of the navigation bar.
The Float Right Class
The class-name to float any anchor element to the right in the navigation div, is called "split". The corresponding element attribute in the last anchor element in the navigation div above is: class="split" . The CSS rule in the style element is:
div.topnav a.split {
float: right;
}
CSS Rule for the First Active Anchor Element
The Home section (or home page) for the website is displayed first, when the website is opened, everything being equal. And so the Home anchor element is active. It is given a #04AA6D background color (greenish); and the color of text becomes white, for contrast. The CSS rule for this is:
div.topnav a.active {
background-color: #04AA6D;
color: white;
}
JavaScript has to be used to give the other anchor elements, an active presentation, when it is clicked.
JavaScript
When the website is opened for the first time, the Home section is the current or active section, and this is indicated by the greenish (#04AA6D) background color of the Home anchor element and its white text color, everything being equal. What happens to the background and foreground color of the other anchor elements, when they are clicked? When each is clicked, its section of the website (long webpage) comes up to fill the screen. The background color of the corresponding anchor element has to become #04AA6D and the text color has to become white, producing an active presentation, while the rest of the anchor elements, including the previous active anchor element be at the original background and text color. The following JavaScript code in the HTML head element carries out this function:
<script type="text/javascript">
function fn(id) {
const myCollection = document.getElementsByTagName("a");
for (let i = 0; i < myCollection.length; i++) {
myCollection[i].className = "";
}
if (id == 3)
myCollection[id].className = "split active";
else {
myCollection[id].className = "active";
myCollection[3].className = "split";
}
}
</script>
Each anchor element has the onclick event, and sends its ID to the fn() function within the script tags in the HTML head element. The function performs two operations. The first operation is to put all the anchor elements in the state without any style, by giving all their class-names the value "" (no character). The next operation puts the anchor element that was clicked in the "active" state, by giving the value, "active" to the class-name of that element. If it is the Help anchor element, that has to be active, then the class-name of "split active" is given, to make it active and maintain it in its split (floated) position. Otherwise, the anchor element of interest, among the first three, is made active, and the Help anchor element of ID=3 is still maintained at its split (floated) position, in inactive state, since it as well as all the other anchor elements have just been given zero ("") styles. Do not confuse between giving an anchor element the active presentation, and actually bringing up the website (long page) section to fill the device screen: It is the responsibility of the href attribute of the anchor element to bring up its section to fill the screen, and it is the responsibility of the JavaScript code above to give the anchor element an active presentation.
Multi-page Websites
Many simple websites today are single long page websites, where what would have been separate web-pages, are now short sections in one long page, and each section would fill the screen (when called). The above JavaScript code works fine for such a single long page website, to give the hyperlink a special background and text color. For a multi-page website, where for example, Home, News, Contact and Help are separate web-pages, use JavaScript similar to the following to give the "active" hyperlink, the active presentation:
<script>
if (window.location.href == 'replace with URL for Webpage 3') {
document.getElementById('3').style.backgroundColor = #04AA6D;
document.getElementById('3').style.color = 'white';
}
</script>
where 3 here is the ID for the anchor element (hyperlink) for webpage 3. Read through the code if you have not already done so. This JavaScript code must be in webpage 3. Webpage 3 must have the hyperlink (anchor element), and it too must have id='3', in order to display the anchor element in active presentation.
The Complete Webpage
And there you have it: the complete webpage for the Split Navigation Bar example is:
<!DOCTYPE html>
<html>
<head>
<title>Split Navigation Bar</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
/* Group 1 CSS Rules for wide screens */
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
div.topnav {
overflow: hidden;
background-color: #333;
}
div.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
div.topnav a:hover {
background-color: #ddd;
color: black;
}
div.topnav a.active {
background-color: #04AA6D;
color: white;
}
/* Create a right-aligned (split) link inside the navigation bar */
div.topnav a.split {
float: right;
}
</style>
<script type="text/javascript">
function fn(id) {
const myCollection = document.getElementsByTagName("a");
for (let i = 0; i < myCollection.length; i++) {
myCollection[i].className = "";
}
if (id == 3)
myCollection[id].className = "split active";
else {
myCollection[id].className = "active";
myCollection[3].className = "split";
}
}
</script>
</head>
<body>
<div class="topnav">
<a class="active" href="#home" id="0" onclick="fn(id)">Home</a>
<a href="#news" id="1" onclick="fn(id)">News</a>
<a href="#contact" id="2" onclick="fn(id)">Contact</a>
<a href="#help" class="split" id="3" onclick="fn(id)">Help</a>
</div>
<div style="padding-left:16px">
<h2>Split Navigation Example</h2>
<p>The "Help" link in the navigation bar is separated from the rest of the navigation links, resulting in a "split navigation" layout.</p>
</div>
</body>
</html>
The reader should copy the complete code into the text editor. Save the file with a filename having the extension, .html . Open the file in a browser to see how a split navigation bar looks like. Do some clicking of the hyperlinks.
Chrys
Related Links:
More Related Links:
Cousins
Menus
How to Create a Menu Icon with HTML and CSS and without using a LibraryHow To Create a Top Navigation Bar
How to Create Fixed Auto Height Sidebar Menu with CSS
How to Create a Horizontal Tabs Bar with their Sections using CSS and JavaScript
How to Create a Search Menu to Filter List Items, using CSS and JavaScript
How To Create a Responsive Top Navigation Bar with Left-aligned and Right-aligned Hyperlinks
How to Create a Top Fixed Horizontal Menu with CSS
How to Create a Vertical Navigation Menu for Smartphones and Tablets Using CSS and JavaScript
How to Create a Slide Down Full Screen Curtain Navigation Menu
How To Create a Responsive Collapsible Sidebar Menu
How to Create Pagination of Numbers with Borders
How to Create a Narrow Sticky Vertical Sidebar for Different Social Media Icons
How to Create a Vertical HTML Button Group with CSS
How To Create a Breadcrumb Navigation Menu
How to Create a Hover-able Dropup Menu with CSS Only
How to Create a Clickable Dropdown Menu with CSS and JavaScript
How to Create a Clickable Dropdown Menu inside a Responsive Navigation Sidebar with CSS and JavaScript
How to Create a Hover-able Dropdown Menu inside a Responsive Horizontal Navigation Bar with CSS and JavaScript
How to Create a Clickable Dropdown Broad Menu inside a Horizontal Navigation Bar using CSS and JavaScript
Images
Coming soon . . .Buttons
Coming soon . . .Forms
Coming soon . . .Filters
Coming soon . . .Tables
Coming soon . . .BACK NEXT