Broad Network


How to Create a Bottom Fixed Horizontal Menu with CSS

Fixed Menu

How To, for Web Applications

By: Chrysanthus Date Published: 30 Mar 2025

This tutorial explains How to Create a Bottom Fixed Horizontal Menu with CSS. The menu consists of hyperlinks with few of the hyperlink features, since this is a teaching exercise. Do not confuse between fixed horizontal menu and sticky horizontal menu. Fixed horizontal menu is menu that does not shake as the webpage is scrolled down and up. With sticky horizontal menu, as the webpage is scrolled down, the menu will be going up until it would get stuck at a particular position; also, as the webpage is scrolled up, the menu will come down to its original position when the scrolling ends. This tutorial is on fixed menu at the bottom of the screen. The hyperlinks in the menu may be advertisement hyperlinks.

The complete code for the fixed menu is given at the end of the this tutorial. The reader should copy the code into a text editor. Save the file with any name, but with the extension, .html . Open the file in the browser. Scroll down and up to see the menu remain fixed. The reader may not notice the rather black fixed menu at the bottom of his/her computer screen, if the physical borders of the computer screen is black. Just look carefully and the fixed menu at the bottom, will be seen. The reader is advised to do that before continuing to read the rest of this tutorial.

The Webpage Skelton Code

The webpage skeleton code to which more important code will be added is:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Bottom Fixed Menu</title>
        <link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Description of the Web Page.">

        <style>
        </style>

        <script type="text/javascript">
        </script>
    </head>
    <body>

    </body>
    </html>

Any modern responsible webpage should have at least the first four tags in the HTML head element above. There will be a lot of code in the HTML style element. The HTML script element will have no code, for this project. For this basic example, the HTML body element will have two div elements. The first one will be for the fixed menu and the second one will be for the main document content.

Content for the HTML Body Element

The body content is:

        <div class="navbar">
            <a href="#home">Home</a>
            <a href="#news">News</a>
            <a href="#contact">Contact</a>
        </div>

        <div class="main">
            <h1>Fixed Bottom Menu</h1>
            <h2>Scroll this page to see the effect</h2>
            <h2>The navigation bar will stay at the bottom of the page while scrolling</h2>
  
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
                                            |
                                            |
                                            |
        </div>

The first div element is for the menu. Its class-name is "navbar". It has three hyperlinks. The anchor element is the code for the hyperlink. So anchor element means hyperlink, from a technical point of view. The second div is for the main document content. Its class-name is "main".

Strategy

There is a CSS property called position. One of the values is "fixed". There is another CSS property called bottom. This takes any integer value. In order to have the menu, fixed at the bottom of the screen, assign the CSS property, position to the menu div bar with the value "fixed", and assign the CSS property, bottom to the menu div bar with the value 0px. That is the main thing to do.

Styling the Elements

The elements to style are the body, two divs, and the anchor elements.

Styling the Body Element

The CSS rule for the HTML body element is:

            body {margin:0;}

There is zero gap for all the four margins. With that, the left edge of the menu div bar will align with the left edge of the webpage; its bottom edge will align with the bottom edge of the screen; and its right edge will align with the right edge of the webpage.

Styling the Menu div Bar

The CSS rule for the menu div bar is:

            div.navbar {
                background-color: #333;
                position: fixed;
                bottom: 0;
                width: 100%;
            }

The background color is #333 (black, but not the blackest black). Notice the presence of the "position: fixed;" property and the "bottom: 0;" property. The "bottom: 0;" property has to be typed after the "position: fixed;" property in the same CSS rule. With these two properties, the menu div bar will remain fixed, as the webpage is scrolled. The width of the menu div bar is 100%, meaning it will extend from the left end of the webpage to the right end of the webpage.

Styling the Anchor Elements in the Menu div Bar

The CSS rule for these anchor elements is:

            div.navbar a {
                float: left;
                color: #f2f2f2;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
                font-size: 17px;
            }

Each of the three anchor elements (hyperlinks) is floated left. If they are not floated left or right, the top and bottom padding heights will not show, at the browser. That is, the anchor elements will be short in height. The color of text is #f2f2f2 (white, but not the fullest white). The text in each anchor element is centered horizontally, within its rectangle. The top and bottom padding is 14px, and the left and right padding is 17px. The font size of each character in an anchor element is 17px. No anchor element should be underlined; hence, "text-decoration: none;" .

Styling the Main div

The CSS rule for the div for the main document of the webpage is:

            div.main {
                padding: 16px;
                margin-bottom: 30px;
                height: 1500px; /* Used in this example to enable scrolling */
            }

Padding all round is 16px. Do not forget that padding is the gap between content and the border. Since the gap for the four margins is zero, there is need for this padding, so that text does not begin or end at the edges of the webpage. In order to have some reasonable gap between the top of the webpage and the main content, a top-margin for the main div of 30px is provided. The height of the main div is usually not given. It is given here, and very long, to enable scrolling of the webpage, down and up.

Anchor Element On-hover

The CSS rule for each of the three anchor elements on-hover is:

            div.navbar a:hover {
                background: #ddd;
                color: black;
            }

When the mouse pointer goes over any of the anchor elements, the background color becomes #ddd (light gray) and the color of text becomes black (for contrast).

The Complete Webpage Code

And there you have it: the complete webpage code is:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Bottom Fixed Menu</title>
        <link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Description of the Web Page.">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        
        <style>
            body {margin:0;}

            div.navbar {
                background-color: #333;
                position: fixed;
                bottom: 0;
                width: 100%;
            }

            div.navbar a {
                float: left;
                color: #f2f2f2;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
                font-size: 17px;
            }

            div.main {
                padding: 16px;
                margin-bottom: 30px;
                height: 1500px; /* Used in this example to enable scrolling */
            }

            div.navbar a:hover {
                background: #ddd;
                color: black;
            }
        </style>
    
        <script type="text/javascript">
        </script>
    </head>
    <body>
        <div class="navbar">
            <a href="#home">Home</a>
            <a href="#news">News</a>
            <a href="#contact">Contact</a>
        </div>

        <div class="main">
            <h1>Fixed Bottom Menu</h1>
            <h2>Scroll this page to see the effect</h2>
            <h2>The navigation bar will stay at the bottom of the page while scrolling</h2>
  
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
        </div>
    </body>
    </html>

The reader should copy the code into a text editor. Save the file with any name, but with the extension, .html . Open the file in the browser. Scroll down and up to see the menu remain fixed. The reader may not notice the rather black fixed menu at the bottom of his/her computer screen, if the physical borders of the computer screen is black. Just look carefully and the fixed menu at the bottom, will be seen.

Chrys





Related Links:

More Related Links:

Cousins

Menus

How to Create a Menu Icon with HTML and CSS and without using a Library
How To Create a Top Navigation Bar
How to Create Fixed Auto Height Sidebar Menu with CSS
How to Create a Horizontal Tabs Bar with their Sections using CSS and JavaScript
How to Create a Search Menu to Filter List Items, using CSS and JavaScript
How To Create a Responsive Top Navigation Bar with Left-aligned and Right-aligned Hyperlinks
How to Create a Top Fixed Horizontal Menu with CSS
How to Create a Vertical Navigation Menu for Smartphones and Tablets Using CSS and JavaScript
How to Create a Slide Down Full Screen Curtain Navigation Menu
How To Create a Responsive Collapsible Sidebar Menu

Images

Coming soon . . .

Buttons

Coming soon . . .

Forms

Coming soon . . .

Filters

Coming soon . . .

Tables

Coming soon . . .
BACK

Comments