Top Bar
Bars, especially the navigation top bar, are frequently used components in website design. Usually, navigation bars (navbars) have dynamic elements such as hamburger menus, dropdown lists, or search bars. As the dynamic effects are usually done by JavaScript, we don't cover them in this course. In this lesson, we cover how to make a basic structure of top bars with different icon layouts.
As was the case with cards, we frequently utilize Flex Box to style bars because controlling the positions of icons is key for styling bars.
Case 1: Top bar with only brand logo in the center
This is the most simple one. We add icon images on the top bar and adjust their positions like in the image below.
HTML Example
<div class="top-bar" style="text-align: center;">
<a href="#" class="top-bar-icon">
<img src="img/html5.png">
<img src="img/css3.png">
</a>
</div>
In this case, we are using two images nested under the <a> element to add a link. Adjusting the position of the icons is easy. As the <a> and <img> elements are inline elements, we can use the text-align property. To put the images in the center, set text-align: center.
CSS Example
.top-bar{
width: 100%;
height: 50px;
background-color: azure;
margin-bottom: 20px;
}
.top-bar a{
text-decoration: none;
}
.top-bar-icon img{
width: auto;
height: 30px;
margin: 10px 5px;
}
In this code, we define the size, color, and margin of the top bar itself. To remove the underline styling from the <a> element, we set text-decoration: none. For the images, we set the size and margins.
Case 2: Top bar with icons at both ends and in the center
The image below
Subscribe now for
uninterrupted access.