Create a Horizontal Navigation with CSS - A Step-by-Step Guide
The horizontal navigation is a commonly used menu type on websites. It makes the most important menu items easy to access and is intuitive to use. In this guide, we will discuss how to create an attractive and functional horizontal navigation using CSS.
Basics of the Horizontal Navigation
The horizontal navigation extends across the width of the web page and consists of a List of Links arranged side by side. The navigation is often displayed at the top of the web page and offers the user direct access to the most important pages of the website.
The horizontal navigation is based on an unordered list. With CSS it is easy to create an attractive horizontal menu from the list that looks great and can be customized as desired.
Fundamental Styling Techniques for the Horizontal Navigation
An unordered list (UL list) has a specific style by default. The list has a vertical outer spacing (Margin) of 1em at the top and bottom and an indent (Padding) of 40px on the to the left side. Before the list items, bullet points are inserted as enumeration characters.
The default properties of UL are not suitable for a navigation. They need to be adjusted. An overflow: hidden property is added to the UL element to ensure that li elements do not appear outside the list.
Default settings of UL for the navigation
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
}
LI is a block-level element by default, so it will occupy the full width of its container.
We have to change the default behaviour of LI so that the elements of the list are placed side by side. We need to use display: inline-block, which allows us to set margin , for horizontal spacing.
Place the list items side by side in a row.
nav li {
display: inline-block;
margin: 0 1em;
}
Style the Horizontal Navigation
We use Custom Properties to design the layout of the navigation. It is common practice to define Custom Properties for the :root pseudo-class so that they can be referenced globally. They are always prefixed by --. This makes it particularly easy to customize the navigation menu. The CSS function var(…) is used to access Custom Properties.
The design of the horizontal navigation is crucial for the user-friendliness of the website. A good navigation should be clear and have a logical structure. It must be easy to read and simple to use. The design of the background and font color, as well as the arrangement of the navigation elements and spacing between them play a very important role here.
A good and user-friendly navigation (list of links) is essential for every website so visitors quickly find the content they are looking for.
Styles for a simple horizontal navigation
/* Simple Horizontal Navigation with inline-block */
:root {
--hNavBtnWidth: 12em;
--hNavBtnBG: #6ccd6c;
--hNavBtnFG: #000000;
--hNavHoverBG: #ffa500;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
}
nav li {
display: inline-block;
margin: 0;
padding: 0;
width: var(--hNavBtnWidth);
background: var(--hNavBtnBG);
}
nav a {
display: block;
padding: 0.5em 1em;
text-decoration: none;
color: var(--hNavBtnFG);
}
nav a:hover {
background: var(--hNavHoverBG);
}
Create a simple horizontal navigation
<nav>
<ul>
<li><a href="#">Link Text #1</a></li>
<li><a href="#">Link Text #2</a></li>
<li><a href="#">Link Text #3</a></li>
<li><a href="#">Link Text #4</a></li>
</ul>
</nav>
Simple horizontal navigation with display: inline-block
Horizontal Navigation with Flexible Width of the Menu Items
The navigation based on an unordered list can also occupy the entire width of the page. In the following example, the width of each menu item is flexibly defined by its content. The CSS class active is used for the link of the active page to let the user know which page they are currently on.
Style a horizontal navigation in Full-Width
/* Horizontal Navigation: occupy full width */
:root {
--hNavBG: #666666;
--hNavFG: #ffffff;
--hNavHoverBG: #bbbbbb;
--hNavHoverFG: #000000;
--hNavActiveBG: #04aa6d;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
background: var(--hNavBG);
overflow: hidden;
}
nav li {
margin: 0;
padding: 0;
float: left;
}
nav li a {
display: block;
padding: 0.5em 1em;
text-decoration: none;
text-align: center;
color: var(--hNavFG);
}
nav li a:hover:not(.active) {
background: var(--hNavHoverBG);
color: var(--hNavHoverFG);
}
nav li a.active {
background: var(--hNavActiveBG);
}
Create a horizontal navigation in full-width
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Our Service</a></li>
<li><a href="#">Latest Promotions</a></li>
<li><a href="#">About Us</a></li>
</ul>
</nav>
Horizontal navigation 100% wide
Create a Horizontal Navigation Using Flexbox
Flexbox is a general-purpose layout module that allows you to create a flexible, one-dimensional arrangement of HTML elements, for example a horizontal navigation of a website.
Flexbox is based on a Flex-Container into which a number of Flex Items are inserted. The parent container is given the display: flex property to indicate that flexbox is used.
A horizontal navigation that is created with Flexbox is highly accessible, and it is easy to adapt it to different screen sizes. In this example, UL is the flex container and the menu entries of the list are the flex items.
Styles for the horizontal navigation created with Flexbox
/* Horizontal Navigation with Flexbox, 100% wide */
:root {
--hNavBG: #cccccc;
--hNavFG: #000000;
--hNavHoverBG: #bbbbbb;
--hNavHoverFG: #000000;
--hNavActiveBG: #04aa6d;
--hNavActiveFG: #ffffff;
--hNavBorderColor: #000000;
--hNavBorderWidth: 1px;
}
nav ul {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
background: var(--hNavBG);
flex-flow: row wrap;
justify-content: flex-start;
}
nav li {
padding: 0;
border-right: var(--hNavBorderWidth) solid var(--hNavBorderColor);
}
nav li a {
display: block;
padding: 0.5em 1em;
text-decoration: none;
text-align: center;
color: var(--hNavFG);
}
nav li a:hover:not(.active) {
background: var(--hNavHoverBG);
color: var(--hNavHoverFG);
}
nav li a.active {
background: var(--hNavActiveBG);
color: var(--hNavActiveFG);
}
Horizontal Navigation using Flexbox
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Our Service</a></li>
<li><a href="#">Recent Promotions</a></li>
<li><a href="#">About Us</a></li>
</ul>
</nav>