Menu

Log in

Sign up

From beginner to master of web design, coding, infrastructure operation, business development and marketing

  • COURSES
  • HTML & CSS Introduction
  • HTML & CSS Coding with AI
  • Linux Introduction
  • Docker Basics
  • Git & GitHub Introduction
  • JavaScript Coding with AI
  • Django Introduction
  • AWS Basics
  • Figma Introduction
  • SEO Tutorial for Beginners
  • SEO with AI
  • OTHERS
  • About
  • Terms of Service
  • Privacy Policy

© 2024 D-Libro. All Rights Reserved

HTML & CSS IntroductionChapter 17. CSS: Styling Components

Top Bar

Top Bar

Designing Navigation Bars in HTML & CSS

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.

Top bar example
HTML Example
HTML
<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
CSS
.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 is the target design in this case example. This is a frequently used top bar layout.

Top bar styling with icons at both ends and in the center

As there are three elements on the bar in this case, we cannot use the text-align property. The easiest implementation is utilizing Flex Box. Make the top bar a flex container and handle the three elements as flex items.

HTML Example
HTML
<div class="top-bar" style="display: flex; justify-content: space-between; align-items: center;">
  <img src="img/hamburger-menu.png" style="height: 20px; margin-left: 10px;">
  <a href="#" class="top-bar-icon">
    <img src="img/html5.png">
    <img src="img/css3.png">
  </a>
  <img src="img/search-icon.png" style="height: 30px; margin-right: 10px;">
</div>

To adjust the position of each image, use justify-content: space-between for horizontal position alignment and align-items: center for vertical position alignment.

As we are directly adding all required CSS code to the HTML code, the code in the CSS file stays the same.

Case 3: Top bar with icons in the center and at the right end

The image below is a target design in this case example. This case is a bit tricky as there is no single property to set the two images in the center and at the right end at the same time.

Top bar with icons in the center and at the right end

First step: Divide the bar into three sections using Flex Box.

Like shown in the illustration below, at this point, the icons still stay at the left end of each section because of the default setting.

Styling a top bar with icons in the center and at the right end: Step 1

You can also check the status using the browser developer tool like shown in the image below.

Styling a top bar with icons in the center and at the right end: Step 2

Second step: Move icons with the text-align property

As the images are inline elements, you can use the text-align property to adjust the horizontal position in each section like in the illustration below.

Styling a top bar with icons in the center and at the right end: Step 3
HTML Example
HTML
<div class="top-bar" style="display: flex; align-items: center;">
  <div style="flex-basis: 30%;"></div>
  <a href="#" class="top-bar-icon" style="flex-basis: 40%; text-align: center;">
    <img src="img/html5.png">
    <img src="img/css3.png">
  </a>
  <div style="flex-basis: 30%; text-align: right;">
    <img src="img/search-icon.png" style="height: 30px; margin-right: 10px;">
  </div>
</div>

As we are directly adding all required CSS code to the HTML code, the code in the CSS file stays the same.

Ideaposition: fixed and top: 0

To fix the position of a top bar, you can use the position and top properties. When position: fixed is used, the element will stay at a fixed position. Then, you can set the distance from the top of the browser using the top property. As the top bar usually stays at the top of the browser, set top: 0. In the practice below, we are not adding these properties as all case examples will overlap if you set these properties.

The details of the position properties will be covered in the next course.

Practice

Objective:
Create and style top bars with different designs

1. Update the body section of the HTML file

Add the code below in the <body> section of the chapter17.html file.

chapter17.html
<h2 style="text-align: center;">Bars</h2>
<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>
<div class="top-bar" style="display: flex; justify-content: space-between; align-items: center;">
  <img src="img/hamburger-menu.png" style="height: 20px; margin-left: 10px;">
  <a href="#" class="top-bar-icon">
    <img src="img/html5.png">
    <img src="img/css3.png">
  </a>
  <img src="img/search-icon.png" style="height: 30px; margin-right: 10px;">
</div>
<div class="top-bar" style="display: flex; align-items: center;">
  <div style="flex-basis: 30%;"></div>
  <a href="#" class="top-bar-icon" style="flex-basis: 40%; text-align: center;">
    <img src="img/html5.png">
    <img src="img/css3.png">
  </a>
  <div style="flex-basis: 30%; text-align: right;">
    <img src="img/search-icon.png" style="height: 30px; margin-right: 10px;">
  </div>
</div>
<hr>

2. Update the CSS code

Open the component.css and add new code to style the bar elements.

component.css
/* Bars */
.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;
}

3. Check the result with a browser

Open chapter17.html with a browser. You can see various top bar designs.

You can also check the sample result here (Demo Site).

link


You can also learn this topic offline. Click AmazonKindle.

More Topics to Explore

Using float for Text Wrapping Around Images

float: left and right

Styling Components with AI: Buttons, Cards, and More

Styling Components with AI: Buttons, Cards, and More

Fine-tuning List Marker Positioning with CSS

list-style-position

Dark Mode Design: Creating Dark Color Palette in CSS

Dark Mode Design: Creating Dark Color Palette in CSS

Using float for Text Wrapping Around Images

float: left and right

Styling Components with AI: Buttons, Cards, and More

Styling Components with AI: Buttons, Cards, and More

Fine-tuning List Marker Positioning with CSS

list-style-position

Dark Mode Design: Creating Dark Color Palette in CSS

Dark Mode Design: Creating Dark Color Palette in CSS

Tags:

Component

Top Bar

Navbar

HTML & CSS Introduction
Course Content

Chapter 1. Overview of Website Development

How Websites Work?

Designing, Building and Publishing Websites

Designing Websites

Building Websites – Frontend and Backend Coding

Web App vs. Website

Frontend Coding

Web Framework and CMS

Publishing Websites (Hosting Services)

Chapter 2. Preparing for Website Coding

Two Key Tools to Start Coding Websites

How Browsers Display Web Pages

File Name Rules

Website Directory Structure

Absolute Path vs. Relative Path

Chapter 3. HTML Basics

What Is HTML?

HTML Element

Attribute

HTML Document Structure

Layout Semantics

Heading and Paragraph Tag

Text-Level Semantics

Space, Line-break and Tag in Content

Comments in HTML Document

Chapter 4. HTML: Add Links and Images

Overview of Adding Links and Images

Embed Images – <img>

Image File Format

Add Hyperlinks – <a>

Add Hyperlinks to Images

Add Hyperlinks to Specific Location on Web Page

Link Tag – <link>

Script Tag – <script>

Chapter 5. HTML: Create Lists and Tables

Create Lists

Create Tables

Combine Table Cells

Chapter 6. HTML: Create Forms

Create Forms

Create Text Input Forms and Submit Button

Radio Button and Checkbox

Select Box

Labels

Auto Complete and Disabled

Chapter 7. Bridging HTML and CSS

Block Element vs. Inline Element

Nesting Elements – Parent Elements and Child Elements

Div vs. Span

Global Attribute – Class, ID and Style

Accordion – <Details> and <Summary>

Chapter 8. CSS Basics

What Is CSS?

CSS Syntax

Where To Type CSS?

CSS Basic Selectors

Descendant Selector

Inheritance

Specificity

Reset CSS

Browser Developer Tools for CSS

Comments in CSS Document

Chapter 9. Web Design Basics

Design Element Representation in HTML and CSS

Key Design Points by CSS

Length

Color Code – HEX and RGB

Color Theme

Chapter 10. CSS: Sizing and Spacing

CSS Box Model

width and height

padding

margin

Margin and Padding for Specific Side

margin: auto

box-sizing

Chapter 11. CSS: Styling Text and Images

Text Styling Properties

font-size

color

font-family

Web Font and Google Font

font-weight and font-style

text-decoration

line-height and letter-spacing

text-align

vertical-align

Styling Images

float: left and right

Chapter 12. CSS: Styling Backgrounds

background-color

background-image

background-size

background-repeat

background-position

background-attachment

background (Multiple Properties)

Chapter 13. CSS: Styling Borders and Drawing Lines

border-style

border-color

border-width

border-radius

Border (Multiple Properties)

Borders on Specific Side

Border Radius on Specific Side

Chapter 14. CSS: Layout – Key Concepts and Display Property

Layout Before and After

Layout Key Design Points

Display Property

inline, block and inline-block

display: none

Chapter 15. CSS: Layout – Flex Box

Flex Box – display: flex

flex-direction

Main Axis and Cross Axis

flex-wrap

justify-content

align-items

align-content

align-self

flex-grow

flex-shrink

flex-basis

margin: auto with Flex Box

Inline Flex Box

Nested Flex Box

Chapter 16. CSS: Styling Lists

List Styling Properties

list-style-type

list-style-image

list-style-position

Chapter 17. Creating and Styling Components

Components and Layout

Buttons

Cards

Top Bar

Footer and Bottom Bar

Chapter 18. Completing Website Development

Website Structure Design

Live Server

Home (Landing) Page Development

Main (List) Page Development

Content (Detail) Page Development

Chapter 19. Publishing Websites

Key Steps to Publish Websites

Domain and DNS Server

Favicon

GitHub Pages

Chapter 20. Supplemental Topics

Horizontal Rule – <hr>

Line Break – <br>

Reserved Characters and HTML Entities

Non-breaking Space – &nbsp;

Chapter 1. Overview of Website Development

How Websites Work?

Designing, Building and Publishing Websites

Designing Websites

Building Websites – Frontend and Backend Coding

Web App vs. Website

Frontend Coding

Web Framework and CMS

Publishing Websites (Hosting Services)

Chapter 2. Preparing for Website Coding

Two Key Tools to Start Coding Websites

How Browsers Display Web Pages

File Name Rules

Website Directory Structure

Absolute Path vs. Relative Path

Chapter 3. HTML Basics

What Is HTML?

HTML Element

Attribute

HTML Document Structure

Layout Semantics

Heading and Paragraph Tag

Text-Level Semantics

Space, Line-break and Tag in Content

Comments in HTML Document

Chapter 4. HTML: Add Links and Images

Overview of Adding Links and Images

Embed Images – <img>

Image File Format

Add Hyperlinks – <a>

Add Hyperlinks to Images

Add Hyperlinks to Specific Location on Web Page

Link Tag – <link>

Script Tag – <script>

Chapter 5. HTML: Create Lists and Tables

Create Lists

Create Tables

Combine Table Cells

Chapter 6. HTML: Create Forms

Create Forms

Create Text Input Forms and Submit Button

Radio Button and Checkbox

Select Box

Labels

Auto Complete and Disabled

Chapter 7. Bridging HTML and CSS

Block Element vs. Inline Element

Nesting Elements – Parent Elements and Child Elements

Div vs. Span

Global Attribute – Class, ID and Style

Accordion – <Details> and <Summary>

Chapter 8. CSS Basics

What Is CSS?

CSS Syntax

Where To Type CSS?

CSS Basic Selectors

Descendant Selector

Inheritance

Specificity

Reset CSS

Browser Developer Tools for CSS

Comments in CSS Document

Chapter 9. Web Design Basics

Design Element Representation in HTML and CSS

Key Design Points by CSS

Length

Color Code – HEX and RGB

Color Theme

Chapter 10. CSS: Sizing and Spacing

CSS Box Model

width and height

padding

margin

Margin and Padding for Specific Side

margin: auto

box-sizing

Chapter 11. CSS: Styling Text and Images

Text Styling Properties

font-size

color

font-family

Web Font and Google Font

font-weight and font-style

text-decoration

line-height and letter-spacing

text-align

vertical-align

Styling Images

float: left and right

Chapter 12. CSS: Styling Backgrounds

background-color

background-image

background-size

background-repeat

background-position

background-attachment

background (Multiple Properties)

Chapter 13. CSS: Styling Borders and Drawing Lines

border-style

border-color

border-width

border-radius

Border (Multiple Properties)

Borders on Specific Side

Border Radius on Specific Side

Chapter 14. CSS: Layout – Key Concepts and Display Property

Layout Before and After

Layout Key Design Points

Display Property

inline, block and inline-block

display: none

Chapter 15. CSS: Layout – Flex Box

Flex Box – display: flex

flex-direction

Main Axis and Cross Axis

flex-wrap

justify-content

align-items

align-content

align-self

flex-grow

flex-shrink

flex-basis

margin: auto with Flex Box

Inline Flex Box

Nested Flex Box

Chapter 16. CSS: Styling Lists

List Styling Properties

list-style-type

list-style-image

list-style-position

Chapter 17. Creating and Styling Components

Components and Layout

Buttons

Cards

Top Bar

Footer and Bottom Bar

Chapter 18. Completing Website Development

Website Structure Design

Live Server

Home (Landing) Page Development

Main (List) Page Development

Content (Detail) Page Development

Chapter 19. Publishing Websites

Key Steps to Publish Websites

Domain and DNS Server

Favicon

GitHub Pages

Chapter 20. Supplemental Topics

Horizontal Rule – <hr>

Line Break – <br>

Reserved Characters and HTML Entities

Non-breaking Space – &nbsp;