Jump to content

How add multiple pages link in mobile navigation menu

Recommended Posts

I created a mobile navigation menu which display navigation icons in the bottom of the mobile screen. I linked google icons page where I'm taking the icons. All 5 icons are displaying in the bottom of screen, however now I'm stuck and don't have an idea how to add links of pages in the menu bar. I mean there is icon with three bar for main menu, like I want to add contact.html, blog.html, images.html in that icon. I mean whenever user click on the three bar it should display the links of these pages where user can click on of those and read. I appreciate your help.

Here is the html code

<!DOCTYPE html>
<title>Mobile Bottom Navigation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf8">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
<div class="bottom-nav">
<a href="index.html" class="nav-link">
<i class="material-icons nav-icon">home</i>
<span class="nav-text"> Home </span>
<a href="about.html" class="nav-link nav-link-active">
<i class="material-icons nav-icon">message</i>
<span class="nav-text"> About </span>
<a href="create.html" class="nav-link">
<i class="material-icons nav-icon">create</i>
<span class="nav-text"> Create Post </span>
<a href="account.html" class="nav-link">
<i class="material-icons nav-icon">person</i>
<span class="nav-text"> Account </span>
<a href="#" class="nav-link">
<i class="material-icons nav-icon">menu</i>
<span class="nav-text"> Menu </span>

here is the CSS code

body {
margin: 0 0 55px 0;
.bottom-nav {
position: fixed;
bottom: 0;
width: 100%;
height: 55px;
box-shadow: 0 0 3px rgba(0. 0. 0. 0.2);
background-color: #ffffff;
display: flex;
overflow-x: auto;
.nav-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-grow: 1;
min-width: 50px;
overflow: hidden;
white-space: nowrap;
font-family: sans-serif;
font-size: 13px;
color: #444444;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.1s ease-in-out;
.nav-link:hover {
background-color: #000000;
.nav-link-active {
.nav-icon {
font-size: 18px;


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...