Implementing a Responsive Navigation Menu for an E-commerce Website with CSS Flexbox

Prerequisites

To follow along with this tutorial, you need to have:

• An understanding of how to set up a html file.

• An understanding of class names and pseudo-selectors.

• An understanding of the four states of a link.

Introduction: An Overview of CSS Flexbox

Before we get started on how to build responsive navigation, we need to define what Flexbox is, some of its essential terminologies, and finally, a critical overview of some of its properties.

Flexbox is a set of related CSS properties used in building one-dimensional layouts. The main idea is that the space inside of a container element can be automatically divided by its child elements. Flexbox makes it easy to align items inside a parent container vertically and horizontally. With this, it solves some widespread CSS problems, such as:

• vertical centering

• creating equal-height columns

Some Important Terminologies in Flexbox:

Flex Container:

This is the element on which we want to use Flexbox. All that’s needed to turn an element into the flex container is to set its display properties to flex, i.e., display: flex.. When this is done, all the direct child components are elements within the flex container. It will become flex-items. Also, it is essential to note that the flex container and flex items have different properties that can be applied to them.

Main Axis:

This is referred to as the direction in which the flex items are laid out. It is usually in a horizontal direction, going from left to right.

Cross Axis:

It is the alignment of flex items perpendicular to the central axis. For context, it goes from top to bottom. It is important to remember these names and their definitions since the direction of the central and cross-axis can be changed.

Before we move to creating the Nav, I'll give you an overview of some properties of both the flex container and the flex items.

Flex Container Properties:

• Gap: This is to create space between the flex items without using a margin.

• Justify-content: This is to align flex items along the main axis (horizontally by default).

• Align-items: This aligns items along the cross-axis (vertically by default).

• Flex direction: This defines the direction of the main axis.

Flex items properties:

• Align-self: is to overwrite align items for individual flex items

• Flex grow: This is used to allow an element to grow.

• Flex-shrink: It is used to make an element shrink.

HTML Structure of the Navigation bar

You must do a few things in HTML to create a navigation menu. The first thing is to use the nav elements <nav></nav> (with class name “main-nav”) as this is where your navigation menu would be found. Then, the next step and the most semantically sound way of building a navigation would be to use a list with the navigation links side to side. So for the list, we will create an unordered list using the ul element ( <ul></ul> ) with the class name main-nav-list.

If done correctly, it would look like this: <ul class="main-nav-list"></ul>. After this is done, you will fill the list element with list item elements (<li></li>), each containing an anchor element (<a></a>). To understand, it would look like <ul class="main-nav-list"> <li> <a href="#"> <a/> Section 1 </li></ul>

The # in the previous code indicates that the link leads nowhere, and the content of section one is for a single navigation item; more often than not, the navigation usually has multiple links.

After writing the first li item, you would copy and paste the code as often as needed. when done, your list will look like this:

<li><a class="main-nav-link" href="#"> Section 1</a></li>

<li><a class="main-nav-link" href="#"> Section 2</a></li>

<li><a class="main-nav-link" href="#"> Section 2</a></li>

<li><a class="main-nav-link" href="#"> Section 3</a></li>

<li><a class="main-nav-link" href="#"> Section 4</a></li>

<li><a class="main-nav-link nav-cta" href="#"> Section 5</a></li>

</ul>.

Now, you need to remove the bullet points and make each li element appear side by side.

CSS Structure of the Navigation bar

After setting up the HTML, it's time to code the CSS of the navigation bar. So the first thing to do in your CSS file is to select the class="main-nav-link. This is done by adding a dot to the class name, i.e., .main-nav-link. And now, to remove the list styling or the dots at the back of the nav list items, you simply use the list-style formatting in CSS and specify none. This should look like this:

.main-nav-list {

list-style: none;
}

After this, to make them appear side by side, you need to use flexbox, in this case, the display:flex property. This would look like this :

.main-nav-list {
list-style: none;
display: flex;
}

Now that the two major problems have been solved, it's time to focus on some styling. The first thing would be to use the gap property to create space between the list items. An ideal gap between the list items would be 32 px(pixels). The updated code should look like this:

.main-nav-list {
list-style: none;
display: flex;
gap: 32px;
}

And now, to style the link or anchor (a) elements in the list, you need to give each of them the same class name that would be used in CSS, which would be the ‘main-nav-link’. So the anchor elements would look like this:

<a class="main-nav-link" href="#"> Section 1</a>

After adding class names to the Li elements, the first step is to select the link and the visited states of the link using pseudo-classes:

.main-nav-link :link,
.main-nav-link :visited {}

Start by removing the text decorations, and do this by using text-decoration set to none. That is:

.main-nav-link:link,
.main-nav-link:visited {
text-decoration: none; }

The next step would be to set the color of the text to any one of your choice using a "color" selector and then specify whatever color you want. Then, you choose the size of the fonts using the "font-size" selector:

.main-nav-link:link,
.main-nav-link:visited {
text-decoration: none;
color: #333;
font-size: 18px;
}

Since you are building a navigation bar for an e-commerce website, you need it to be as appealing as possible. Thus, you need the navigation to draw some attention. An easy way to do this would be to bolden the text on the navigation using the "font-weight" selector and, from personal preference, set it to 500. That is:

.main-nav-link:link,
.main-nav-link:visited {
text-decoration: none;
font-weight:500;
color: #333;
font-size: 18px;
}

Another trick to increase the appeal of the navigation would be to use the "transition" selector to specify how long it would take to switch from the styling of the link and visited states to the styling of the hover and active state:

.main-nav-link:link,
.main-nav-link:visited {
text-decoration: none;
font-weight:500;
color: #333;
font-size: 18px;
transition: all 0.3s:
}

The 'all' used in the transition property indicates you want all elements with the class name where the transition property is put to transition in the stated amount of time.

After this is done, the next step is to select the hover and active states using pseudo-classes:

.main-nav-link:hover,
.main-nav-link:active{}

These states can then be styled depending on what you need for your projects. For example, we can give its hover state a different color entirely (basically, when the mouse hovers above the link, it changes color to what you set it to be). It would look something like this:

.main-nav-link:hover,
.main-nav-link:active {
color: #cf711f;
}

This is all you need to build a navigation, but for e-commerce websites, you should add this trick to push traffic, which is to add a call to action button in the navigation.

So, to do this, firstly, you will need to add a new class name to one of the links in the nav. It is advisable to make the last link the call to action button. So this would look something like:

<li><a class="main-nav-link nav-cta" href="#"> Section 5</a></li>

Now, in the CSS, you would select the nav-cta class and style it to be a button and to do that. You give it some padding, a background color, some border radius to make the edges look a little rounded (do this based on preference) and a few other things.

Here it is:

.nav-cta:link,
.nav-cta:visited {
padding: 1.2rem 2.4rem;
border-radius: 9px;
color: #fff;
background-color: #e67e22;
}

Since the padding needs to be applied, you must make the nav elements into in-line block elements. For this, you need to add the display:in-line block to the CSS code of the nav, basically:

.main-nav-link:link,
.main-nav-link:visited {
display:in-line;
text-decoration: none;
font-weight:500;
color: #333;
font-size: 18px;
transition: all 0.3s:
}

And lastly, as with the links in the nav, you need to style the hover and active states of the button.

.nav-cta:hover,
.nav-cta:active {
background-color: #cf711f;
}

As for the colors used, the two colors for the button are different shades of orange. The link and visited are lighter, and the hover and active states have darker shades.

Conclusion

In this tutorial, you created a navigation bar for an E-commerce website and learned a trick for making it generate more traffic by adding a call to action button on one of the links. If you follow through correctly, this will teach you everything you need to know about navigation bars.